@use 'styles/_typography';

.homeNav {
    padding: 51px 115px 22px 115px;

    display: grid;
    grid-template-columns: 200px 1fr 200px;
    align-items: baseline;

    :global .information {
        @include typography.header-cta;
    }
}

.typesNav {
    text-align: center;

    .filter {
        @include typography.body;
    }

    .notLink {
        @include typography.body-cta;

        text-decoration-line: none;
    }

    .link {
        @include typography.body-cta;
    }
}

.homeProductsList {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    column-gap: 10px;
    row-gap: 20px;

    > {
        li {
            grid-column-end: span 8;

            &.featured {
                grid-column-end: span 14;
            }

            &:has(+ .featured:nth-child(2n + 1)) {
                grid-column-end: span 10;
            }
        }

        li.featured:nth-child(2n) + li {
            grid-column-end: span 10;
        }
    }
}

.homeProduct {
}