main {
    position: relative;
    display: flex;

    margin-top: 75px;
    z-index: 1;

    .main {
        width: 100%;
        position: relative;
    }
}

/*** HERO SECTION *******************************/
.hero {
    overflow: hidden;
    position: relative;
    z-index: 1;

    height: 75vw;

    & img {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
}

.tops {
    background-color: #eee;
}

.tops, .chefs {
    padding: 2rem 0 2rem 0;

    .tops_wrap, .chefs_wrap {
        width: 95%;
        margin: 0 auto;

        display: grid;
        grid-template-columns: 48% 48%;
        column-gap: 1rem;
        row-gap: 1rem;
    }

    .tops_wrap h2, .chefs_wrap h2 {
        grid-column: 1/3;
    }

    .tops_wrap img, .chefs_wrap img {
        width: 100%;
        height: auto;
    }

    .tops_wrap .midvw, .chefs_wrap .midvw {
        display: none;
        background-color: #eee;
        
        border-radius: 2rem;
        box-shadow: 0 0 5px #111;
    }
    
    .chefs_wrap .midvw {
        background-color: #aaa;
    }

    .tops_wrap #model, .chefs_wrap #model{
        grid-column: 1/2;
        grid-row: 2/4;
        max-height: 550px;

        border-radius: 1rem;
    }

    .tops_wrap #sample, .chefs_wrap #sample {
        background-color: #eee;
        grid-column: 2/3;
        
        border-radius: 2rem;
        box-shadow: 0 0 5px #111;
    }
    
    .chefs_wrap #sample {
        background-color: #aaa;
    }

    .tops_wrap p, .chefs_wrap p {
        font-size: .8rem;

        & span {
            display: none;
        }
    }
}

.others {
    padding: 3rem 0 3rem 0;

    .others_wrap {
        width: 95%;
        margin: 0 auto;

        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .others_wrap h2 {
        grid-column: 1/3;

        font-size: 1rem;
        font-weight: 600;
    }

    .others_wrap .garment {
        background-color: #eee;
        border-radius: .5rem;

        & img {
            width: 100%;
        }

        & h6 {
            padding-left: 10px;
            font-size: .8rem;
            font-weight: 600;
        }
    }
}

@media (min-width: 425px) {
    .tops, .chefs {
        .tops_wrap, .chefs_wrap {
            width: 90%;
        }

        .tops_wrap p, .chefs_wrap p {
            font-size: .9rem;

            & span {
                display: inline;
            }
        }
    }
}

@media (min-width: 768px) {
    .hero {
        height: 38vw;
    }

    .tops, .chefs {
        padding: 3rem 0 3rem 0;

        .tops_wrap, .chefs_wrap {
            width: 90%;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: auto 270px auto;
            gap: 1rem;
        }

        .tops_wrap h2, .chefs_wrap h2 {
            grid-column: 1/4;
        }

        .tops_wrap .midvw, .chefs_wrap .midvw {
            width: 100%;
            display: block;
            grid-column: 2/3;
            grid-row: 2/3;
            max-height: 270px;
        }

        .tops_wrap #sample, .chefs_wrap #sample {
            grid-column: 3/4;
            grid-row: 2/3;
            max-height: 270px;
        }

        .tops_wrap p, .chefs_wrap p {
            grid-column: 2/4;
            grid-row: 3/4;
            font-size: 1rem;
        }
    }

    .others {
        .others_wrap {
            width: 90%;
            grid-template-columns: repeat(3, 1fr);
        }

        .others_wrap h2 {
            grid-column: 1/4;

            font-size: 1.2rem;
        }

        .others_wrap .garment h6 {
            font-size: 1rem;
        }
    }
}

@media (min-width: 1024px) {
    .hero {
        .hero-img {
            width: 100%;
            left: 0;
            aspect-ratio: 1/.55;
        }
    }

    .tops, .chefs {
        padding: 4rem 0 4rem 0;

        .tops_wrap, .chefs_wrap {
            gap: 2rem;
            grid-template-rows: auto auto auto;
        }

        .tops_wrap h2, .chefs_wrap h2 {
            font-size: 2rem;
            font-weight: 600;
        }

        .tops_wrap p, .chefs_wrap p {
            font-size: 1.3rem;
        }
    }

    .others {
        .others_wrap {
            grid-template-columns: repeat(4, 1fr);
        }

        .others_wrap h2 {
            grid-column: 1/5;

            font-size: 1.6rem;
        }
    }
}

@media (min-width: 1440px) {
    .hero {
        .hero-img {
            width: 120%;
            left: -10%;
            aspect-ratio: 1/.4;
        }
    }

    .tops, .chefs {

        .tops_wrap .midvw, .tops_wrap #sample, .chefs_wrap .midvw, .chefs_wrap #sample {
            max-height: fit-content;
        }

        .tops_wrap #model, .chefs_wrap #model {
            max-height: 750px;
        }
        
        .tops_wrap h2, .chefs_wrap h2 {
            font-size: 2rem;
        }
    }

    .others {
        padding: 5rem 0 5rem 0;

        .others_wrap h2 {
            font-size: 2rem;
        }

        .others_wrap .garment h6 {
            color: #333;
            font-size: 1.4rem;
        }
    }
}