/* ### HERO ### */
.hero {
    margin-top: 2%;
}

.hero .wrapper {
    width: 100%;
    max-width: var(--container-size);
    height: 37.5rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.hero .container {
    height: 100%;
}

.hero main {
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-inline: auto;
}

.hero main > :first-child {
    font-family: var(--ff-secondary-500);
    font-size: var(--fs-2xl, 3.438rem);
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.hero main p {
    font-family: var(--ff-primary-400);
    margin-bottom: 1.875rem;
}

.hero main button {
    font-size: var(--_fs-sm-alt-xs, 1.063rem);
    color: var(--c-primary);
    padding: 0.75rem 1.75rem 0.625rem 1.75rem;
    border-radius: 0;
}

/* ### HIGHLIGHTS ### */
.highlights {
    padding-block: 2rem;
    margin-top: 3.125rem;
}

.highlights .wrapper {
    display: flex;
    align-items: center;
}

.highlights .highlight {
    width: 25%;
    text-align: center;
    padding-inline: 2.5%;
}

.highlights .highlight .icon {
    max-width: 2.875rem;
    margin: 0 auto 0.625rem;
}

.highlights .highlight .icon img {
    height: 100%;
}

.highlights .highlight > :nth-child(2) {
    font-family: var(--ff-secondary-500);
    font-size: calc(var(--fs-md, 1.625rem) - 0.063rem);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--c-primary);
    margin-bottom: 0.375rem;
}

.highlights .highlight p {
    max-width: 12.25rem;
    font-family: var(--ff-primary-400);
    line-height: 1.625;
    color: var(-_c-dark-gray);
    margin-inline: auto;
}

/* ### CATEGORIES ### */
.categories {
    margin-top: 1rem;
}

.categories .wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.categories .category {
    position: relative;
    height: 23.5rem;
}

.categories .category::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 25%);
}

.categories .category img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.categories .category .text {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: end;
    text-align: end;
    padding: 1.75rem;
}

.categories .category .text * {
    color: #fff;
}

.categories .category .text > :first-child {
    font-size: var(--_fs-xl-alt, 2.188rem);
    line-height: 1.3;
}

.categories .category .text > :nth-child(2) {
    font-size: var(--_fs-md-alt, 1.5rem);
    margin-top: 0.25rem;
}

.categories .category .text .btn__primary {
    margin-top: 1.25rem;
}

/* ### APPLICATIONS ### */
.applications {
    margin-top: 5.438rem;
}

.applications .head {
    text-align: center;
    margin-bottom: 1.75rem;
}

.applications .head img {
    margin-bottom: 1.25rem;
}

.applications .head > :nth-child(2) {
    font-size: var(--fs-xl, 2.5rem);
}

.applications .wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.applications .application {
    position: relative;
    height: 26.875rem;
}

.applications .application:nth-of-type(1),
.applications .application:nth-of-type(4) {
    grid-column: span 2;
}

.applications .application img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.applications .application > :nth-child(2) {
    position: absolute;
    inset: 0;
    width: 80%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    font-size: var(--_fs-xl-alt, 2.188rem);
    text-transform: uppercase;
    text-align: end;
    padding: 1.75rem;
    margin-left: auto;
}

.applications .application:where(:nth-of-type(2), :nth-of-type(3)) > :nth-child(2) {
    color: #fff;
}

/* ### COLLECTIONS ### */
.collections {
    margin-top: 1.75rem;
}

.collections .wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.collections .content {
    width: 33.33%;
    padding: 1.25rem 3.125rem 1.25rem 2rem;
}

.collections .content > :first-child {
    font-size: var(--fs-xl, 2.5rem);
    margin-bottom: 2rem;
}

.collections .content p {
    margin-bottom: 1.25rem;
}

.collections .content .btn__primary {
    font-size: var(--fs-sm, 1.125rem);
}

.collections .image {
    width: 66.66%;
    height: 100%;
}

.collections .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ### MATERIALS ### */
.materials {
    margin-top: 1.75rem;
}

.materials .wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.materials .material {
    position: relative;
    width: 100%;
    height: 23.5rem;
}

.materials .material img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.materials .material .text {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: end;
    text-align: center;
    padding: 1.75rem;
}

.materials .material .text > :first-child {
    font-size: var(--fs-lg, 1.938rem);
    line-height: 1.5;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.materials .material .text[data-text-color="light"] > :first-child {
    color: #fff;
}

/* ### CTA ### */
.cta {
    margin-top: 2%;
}

.cta .container {
    height: 100%;
}

.cta .wrapper {
    position: relative;
    width: 100%;
    height: 37rem;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cta .wrapper::before {
    width: 100%;
    height: 100%;
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.cta .main {
    position: relative;
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-inline: auto;
    z-index: 2;
}

.cta .main > :first-child {
    font-family: var(--ff-secondary-500);
    font-size: var(--fs-2xl, 3.438rem);
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 0.75rem;
}

.cta .main p {
    font-family: var(--ff-primary-400);
    color: #fff;
    margin-bottom: 1.875rem;
}

.cta .main .btn__primary {
    font-size: var(--fs-sm, 1.125rem);
}

/* ### PRODUCTS ### */
.products {
    margin-top: 5.438rem;
}

.products .head {
    text-align: center;
    margin-bottom: 1.75rem;
}

.products .head img {
    margin-bottom: 1.25rem;
}

.products .head > :nth-child(2) {
    font-size: var(--fs-xl, 2.5rem);
}

.products .more {
    position: relative;
    width: 100%;
    height: 100%;
    flex: none;
}

.products .more > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.products .more .text {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 1rem;
}

.products .more .text > :first-child {
    font-family: var(--ff-tertiary-700);
    font-size: var(--fs-xs, 0.875rem);
    line-height: 1;
}

.products .more .text[data-bg-color="light"] > :first-child {
    color: var(--_c-orangish);
}

.products .more .text > :nth-child(2) {
    font-family: var(--ff-secondary-500);
    font-size: var(--fs-md, 1.625rem);
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    margin-block: 0.625rem 0.75rem;
}

.products .more .text[data-bg-color="light"] > :nth-child(2) {
    max-width: 80%;
    color: var(--_c-orangish);
}

.products .more .text > :nth-child(3) {
    font-family: var(--ff-primary-400);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.products .more .text > :nth-child(3) iconify-icon {
    margin-top: -0.188rem;
}

.products .product {
    height: 100%;
    padding: 1rem;
    border: 1px solid rgba(128, 128, 128, 0.16);
    box-shadow: 0 1px 4px rgba(128, 128, 128, 0.11);
}

.products .product > img {
    width: 100%;
    height: 16.25rem;
    max-height: 16.25rem;
    object-fit: cover;
}

.products .product .colors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-block: 0.75rem 1rem;
}

.products.reversed .product .colors {
    justify-content: flex-end;
}

.products .product .colors span:not(:last-of-type) {
    padding-right: 0.375rem;
}

.products.reversed .product .colors span:not(:last-of-type) {
    padding-inline: 0 0.375rem;
}

.products .product .colors img {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: cover;
}

.products .product > :last-child {
    font-family: var(--ff-secondary-300);
}

.products.reversed .product > :last-child {
    width: fit-content;
    display: block;
    margin-right: auto;
}

/* ### LOCATIONS ### */
.locations {
    margin-top: 5.438rem;
}

.locations .head {
    text-align: center;
    margin-bottom: 1.75rem;
}

.locations .head img {
    margin-bottom: 1.25rem;
}

.locations .head > :nth-child(2) {
    font-size: var(--fs-xl, 2.5rem);
}

.locations .wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.locations .column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}

.locations .column.span {
    grid-column: span 2;
}

.locations .column.span .showroom {
    height: 26.875rem;
}

.locations .showroom {
    position: relative;
    width: 100%;
    height: 17.5rem;
}

.locations .showroom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.locations .showroom .text {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
    padding: 1.75rem;
}

.locations .showroom .text > :first-child:not(.btn__primary) {
    font-size: var(--fs-md, 1.625rem);
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--_c-dark-gray);
    margin-bottom: 0.25rem;
}

.locations .showroom .text > :nth-child(2) {
    font-family: var(--ff-primary-400);
    font-size: var(--fs-sm, 1.125rem);
    line-height: 1.6;
    color: var(--_c-dark-gray);
    margin-bottom: 1.875rem;
}

.locations .showroom .text[data-text-color="light"] > :first-child,
.locations .showroom .text[data-text-color="light"] > :nth-child(2) {
    color: #fff;
}

/* ### SIGN UP ### */
.signup {
    margin-top: 9.75rem;
}

.signup .main {
    text-align: center;
}

.signup .main img {
    margin-bottom: 1.25rem
}

.signup .main > :nth-child(2) {
    font-size: var(--fs-xl, 2.5rem);
    margin-bottom: 0.75rem;
}

.signup .main p {
    font-family: var(--ff-primary-400);
    margin-bottom: 1rem;
}

.signup .main form {
    display: flex;
    align-self: center;
    justify-content: center;
    gap: 0.625rem;
    margin-inline: auto;
}

.signup .main form input {
    max-width: 22.5rem;
    font-size: var(--fs-2xs, 0.75rem);
    background-color: var(--c-neutral);
}

.signup .main form button {
    font-size: var(--_fs-sm-alt-xs, 1.063rem);
    text-wrap: nowrap;
}

/* ###-# MEDIA QURIES #-### */
@media screen and (max-width: 1440px) {
    /* /// APPLICATIONS /// */
    .applications .application {
        height: 26.875vw;
    }
}

@media screen and (max-width: 1280px) {
    /* /// APPLICATIONS /// */
    .applications .application > :nth-child(2) {
        padding: 1.5rem;
    }
    
    /* /// COLLECTIONS /// */
    .collections .content {
        width: 40%;
        padding-inline: 1.5rem 2.5rem;
    }

    .collections .content .btn__primary {
        font-size: var(--fs-base);
    }

    .collections .image {
        width: 60%;
    }

    /* /// MATERIALS /// */
    .materials .material .text {
        padding: 1.5rem;
    }

    /* /// PRODUCTS /// */
    .products .product > img {
        height: 14.375rem;
    }

    .products .more .text[data-bg-color="light"] > :nth-child(2) {
        max-width: 90%;
    }

    /* /// LOCATIONS /// */
    .locations .showroom .text {
        padding: 1.5rem;
    }

    /* /// SIGN UP /// */
    .signup {
        margin-top: 7.5rem;
    }
}


@media screen and (max-width: 1024px) {
    /* /// HIGHLIGHTS /// */
    .highlights .highlight .icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .highlights .highlight > :nth-child(2) {
        font-size: var(--fs-base);
    }
    
    .highlights .highlight p {
        font-size: var(--fs-xs);
    }

    /* /// CATEGORIES /// */
    .categories .wrapper {
        gap: 0.625rem;
    }

    /* /// COLLECTIONS /// */
    .collections .wrapper {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
    }
    
    .collections .content {
        order: 2;
        width: 60%;
        text-align: center;
        padding: 0 1.5rem;
    }

    .collections .content .btn__primary {
        margin-inline: auto;
    }

    .collections .image {
        order: 1;
        width: 100%;
        max-width: 50rem;
    }

    /* /// MATERIALS /// */
    .materials .wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

     /* /// PRODUCTS /// */
    .products .product > img {
        height: 12.5rem;
    }

    .products .more .text[data-bg-color="light"] > :nth-child(2) {
        max-width: 100%;
    }

    /* /// LOCATIONS /// */
    .locations .wrapper {
        grid-template-columns: 1fr;
    }

    .locations .column.span .showroom {
        height: 22.5rem;
    }
    
    .locations .column.span {
        grid-column: auto;
    }

    .locations .column {
        flex-direction: row;
    }

    /* /// SIGN UP /// */
    .signup {
        margin-top: 6.25rem;
    }
}

@media screen and (max-width: 860px) {
    /* /// HIGHLIGHTS /// */
    .highlights {
        margin-top: 1.25rem;
    }

    .highlights .wrapper {
        flex-wrap: wrap;
        gap: 2rem 1.25rem;
    }

    .highlights .highlight {
        width: calc(50% - 0.625rem);
    }

    /* /// CATEGORIES /// */
    .categories .wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    /* /// APPLICATIONS /// */
    .applications .wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .applications .application:nth-of-type(1),
    .applications .application:nth-of-type(4) {
        grid-column: span 4;
    }

    .applications .application:nth-of-type(2),
    .applications .application:nth-of-type(3) {
        grid-column: span 2;
    }

     /* /// PRODUCTS /// */
    .products .more .text,
    .products .product {
        padding: 0.625rem;
    }
     
    .products .product > img {
        height: 11.25rem;
    }

    /* /// LOCATIONS /// */
    .locations .column {
        flex-direction: column;
    }
}

@media screen and (max-width: 720px) {
    /* /// HERO /// */
    .hero .wrapper {
        height: 18.75rem;
    }

    .hero main {
        width: 90%;
    }

    .hero main > :first-child {
        font-size: var(--_fs-xl-alt);
    }

    .hero main p {
        margin-bottom: 1.25rem;
    }

    .hero main button {
        font-size: var(--_fs-xs-alt);
        padding: 0.625rem 1rem 0.5rem 1rem;
    }

    /* /// CATEGORIES /// */
    .categories .wrapper {
        grid-template-columns: 1fr;
    }

    .categories .category {
        width: 100%;
        height: 20.375rem;
    }

    /* /// APPLICATIONS /// */
    .applications .wrapper {
        grid-template-columns: 1fr;
    }

    .applications .application {
        height: 22.75rem;
    }
    
    .applications .application:nth-of-type(n+1) {
        grid-column: auto;
    }

    /* /// COLLECTIONS /// */
    .collections .content {
        width: 100%;
        max-width: 30rem;
        padding: 0;
    }

    .collections .content > :first-child {
        margin-bottom: 1.5rem;
    }

    /* /// MATERIALS /// */
    .materials .wrapper {
        grid-template-columns: 1fr;
    }

    .materials .material {
        height: 20.375rem;
    }

    .materials .material .text > :first-child {
        margin-bottom: 1.5rem;
    }

    /* /// CTA /// */
    .cta {
        margin-top: 2rem;
    }
    
    .cta .wrapper {
        height: 23.75rem;
    }

    .cta .main {
        width: 90%;
    }

    .cta .main > :first-child {
        font-size: var(--_fs-xl-alt);
    }

    .cta .main p {
        margin-bottom: 1.25rem;
    }

    .cta .main .btn__primary {
        font-size: var(--_fs-xs-alt);
        padding: 0.625rem 1rem 0.5rem 1rem;
    }

    /* /// LOCATIONS /// */
    .locations .column .showroom {
        height: 15.625rem;
    }

    .locations .column.span .showroom {
        height: 20rem;
    }

    /* /// SIGN UP /// */
    .signup {
        margin-top: 3.75rem;
    }
}

@media screen and (max-width: 580px) {
    /* /// HIGHLIGHTS /// */
    .highlights .highlight {
        padding: 0;
    }

    .highlights .highlight .icon {
        width: 2rem;
        height: 2rem;
    }

    /* /// PRODUCTS /// */
    .products .product > img {
        height: 14.375rem;
    }

}

@media screen and (max-width: 360px) {
    /* /// HIGHLIGHTS /// */
    .highlights {
        margin-top: 0.625rem;
    }
    
    .highlights .wrapper {
        row-gap: 1.25rem;
    }

    .highlights .highlight {
        width: 100%;
    }

    /* /// CATEGORIES /// */
    .categories .category {
        height: 18rem;
    }

    /* /// APPLICATIONS /// */
    .applications .application {
        height: 20rem;
    }

    /* /// COLLECTIONS /// */
    .collections .content > :first-child {
        margin-bottom: 1rem;
    }

    /* /// MATERIALS /// */
    .materials .material {
        height: 18rem;
    }

    .materials .material .text > :first-child {
        margin-bottom: 1rem;
    }

    /* /// LOCATIONS /// */
    .locations .column .showroom {
        height: 14.375rem;
    }

    .locations .column.span .showroom {
        height: 18.75rem;
    }

    /* /// SIGN UP /// */
    .signup {
        margin-top: 3.125rem;
    }
}