@property --eCols {
    syntax: "*";
    initial-value: 100%;
    inherits: false;
}

.eGrid .--eRow {
    display: grid;
    grid-template-columns: var(--eCols);
    gap: var(--eGap, 24px);
    margin-bottom: var(--eRowBottom, 24px);
    max-height: var(--eRowMaxWidth, 100%);
    height: auto;
    overflow: var(--eRowOverflow, visible);
    width: 100%;

    @supports (width: -webkit-fill-available) {
        & {
            width: -webkit-fill-available;
        }
    }

    @supports (width: -moz-available) {
        & {
            width: -moz-available;
        }
    }

    & > *:last-child:nth-child(odd),
    & > *:nth-child(odd of :not([style*="display: none"])):nth-last-child(1 of :not([style*="display: none"])) {
        grid-column: var(--eOddSpan, 1 / -1);
    }

    & .--eRow {
        margin-bottom: var(--eRowBottomSub, 24px);
        gap: var(--eGapSub, 24px);
    }

        & .--eRow > *:last-child:nth-child(odd),
        & .--eRow > *:nth-child(odd of :not([style*="display: none"])):nth-last-child(1 of :not([style*="display: none"])) {
            grid-column: var(--eOddSpan, 1 / -1);
        }

    & .--eTopTitle {
        font-weight: 600;
        font-size: 24px;
        color: var(--gray-900);
        margin-bottom: var(--eTopTitleMB, var(--spacing-3xl));
    }

    & > *,
    & .--eRow > * {
        min-width: 0;
    }

    @media( max-width: 1280px ) {
        &,
        & .--eRow {
            grid-template-columns: 100%;
            grid-template-areas:
                "area__1"
                "area__2"
                "area__3"
                "area__4";
        }
    }
}