main {
    position: relative;
    display: flex;

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

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

.hero {
    overflow: hidden;
    position: relative;
    z-index: 1;

    height: 75vw;

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

.primary {
    padding: 2rem 0 2rem 0;
    position: relative;
    z-index: 1;
    box-shadow:  0 0 10px #ccc inset;
    background-color: #eee;
    height: fit-content;
}

.primary .prime_wrap {
    width: 95%;
    margin: 0 auto;

    .primary_cont {
        display: grid;
        grid-template-columns: 30% 40% 30%;
        align-items: center;
        justify-content: center;
        padding: 0;

        .prime_info {
            & p {
                font-size: .85rem;
                text-align: center;
            } 
        }

        .primary_model {
            height: 100%;
            position: relative;
            display: flex;
            justify-content: center;

            & img {
                width: 100%;
                height: 100%;
            }
        }
    }

    & h3 {
        font-size: 1rem;
        text-align: center;
    }
}

/*** PRIME UNIFORM SECTION ********************************************/
.prime_uniform {
    padding: 2rem 0 2rem 0;

    .prime_uniform_grid {
        width: 95%;
        margin: 0 auto;
    }

    .prime_uniform_grid h3 {
        font-size: 1rem;
        text-align: center;
    }

    .prime_uniform_grid .uniform_grid {
        margin-top: 2rem;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;

        .prod {
            background-color: #1f9;
            box-shadow: 0 0 3px #111;
            border-radius: 1rem;
            overflow: hidden;
    
            & img {
                width: 100%;
            }
    
            .text-cont {
                & h6 {
                    height: 100%;
                    font-size: .7rem;
                    font-weight: 600;
                    text-align: center;
                }
            }
        }
    }
}

.secondary {
    padding: 3rem 0 1rem 0;
    position: relative;
    z-index: 1;
    background-color: whitesmoke;

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

        & h3 {
            font-size: 1rem;
            text-align: center;
        }

        .second_grid {
            display: grid;
            grid-template-columns: 40% 60%;
            align-items: center;
        }

        .second_wear {
            margin-top: 2rem;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;

            .prod {
                background-color: #1f9;
                box-shadow: 0 0 3px #111;
                border-radius: 1rem;
                overflow: hidden;
        
                & img {
                    width: 100%;
                }
        
                .text-cont {
                    & h6 {
                        height: 100%;
                        font-size: .7rem;
                        font-weight: 600;
                        text-align: center;
                    }
                }
            }
        }
    }
}

.secondary .second_wrap .second_grid .second_model {
    display: flex;
    justify-content: center;
    width: 100%;

    & img {
         width: 120%;
    }
}

.secondary .second_wrap .second_grid .second_wrap {
    width: 95%;
    margin: 0 auto;

    & h3 {
        font-size: 1rem;
        text-align: center;
    }

    .second_grid {
        display: grid;
        grid-template-columns: 40% 60%;
        align-items: center;
    }
}

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

    .primary .prime_wrap {
        width: 90%;
        margin: 0 auto;

        .primary_cont {
            .prime_info {
                & p {
                    font-size: 1rem;
                    text-align: center;
                } 
            }
        }
    }

    .prime_uniform .prime_uniform_grid .uniform_grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .secondary .second_wrap {
        width: 90%;

        .second_wear {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .secondary .second_wrap .second_grid {
        grid-template-columns: 30% 70%;

        .second_model {
            & img {
                 width: 100%;
            }
        }
    }
}

@media(min-width: 1024px){
    .primary {
        padding: 4rem 0 4rem 0;
    }

    .primary .prime_wrap {
        width: 80%;

        & h3 {
            font-size: 1.4rem;
            font-weight: 600;
            text-align: center;
        }

        .primary_cont {
            display: grid;
            grid-template-columns: 30% 33% 30%;
            align-items: center;
            justify-content: center;
        }
    }

    .primary .prime_wrap .primary_cont .prime_info {
        display: block;
        padding: 2rem;
        text-align: center;
        
        & p {
            font-size: 1.1rem;
        }
    }

    .primary .prime_wrap .primary_cont .primary_model {
        & img {
            aspect-ratio: 1/1.6;
            width: 80%;
        }
    }

    .prime_uniform {
        padding: 4rem 0 4rem 0;
    }
    
    .prime_uniform .prime_uniform_grid {
        width: 90%;
        & h3 {
            font-size: 1.4rem;
            font-weight: 600;
        }

        .uniform_grid {
            grid-template-columns: repeat(5, 1fr);

            .prod {
                .text-cont {
                    & h6 {
                        font-size: 1rem;
                    }
                }
            }
        }
    }

    .secondary {
        padding: 4rem 0 4rem 0;
    }

    .secondary .second_wrap {
        width: 90%;

        & h3 {
            text-align: center;
            font-size: 1.4rem;
            font-weight: 600;
        }

        .second_grid {
            grid-template-columns: 30% 70%;

            .female_model {
                & img {
                    display: inline-block;
                }
            }
        }

        .second_wear {
            grid-template-columns: repeat(5, 1fr);

            .prod {
                .text-cont {
                    & h6 {
                        font-size: 1rem;
                    }
                }
            }
        }
    }
}

@media(min-width: 1440px){
    .primary .prime_wrap {
        width: 80%;

        .primary_cont {
            display: grid;
            grid-template-columns: 37% 33% 30%;
            align-items: center;
            justify-content: center;
        }
    }

    .primary .prime_wrap .primary_cont .prime_info {
        padding: 2rem;
        text-align: center;
        
        & p {
            font-size: 1.2rem;
        }
    }

    .primary .prime_wrap .primary_cont .primary_model {
        & img {
            aspect-ratio: 1/1.8;
            width: 70%;
        }
    }

    .prime_uniform .prime_uniform_grid {
        & h3 {
            font-size: 1.8rem;
            font-weight: 600;
        }
    }

    /*** UNIFORM GRID ********************************************/
    .secondary .second_wrap {
        & h3 {
            text-align: center;
            font-size: 1.8rem;
            font-weight: 600;
        }
    }
}