main {
    height: max-content;
    position: relative;
    display: flex;

    margin-top: 75px;

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

/*** SHOP BANNER ********************************/
.shop-banner {
    width: 100%;
    max-height: 650px;
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    color: white;
    font-weight: 600;
    z-index: 1;

    .shop-cont {
        width: 95%;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 3;

        .logo, & h5, & h2, & a {
            z-index: 4;
        }

        .logo {
            aspect-ratio: 1/1;
            width: 45%;
            margin: 20px 0 20px 0;
        }
    }

    .model1, .model2 {
        position: absolute;
        bottom: -30px;
        height: 80%;
        z-index: 2;
        transform: rotateY(180deg);
    } 

    .model1 {
        left: -35%;
        transition: left 400ms ease-in-out;
    }

    .model2 {
        right: -30%;
        transition: right 400ms ease-in-out;
    }

    & a {
        font-weight: 700;
        box-shadow: 0 0 10px 1px #ffdd00;
        background-color: #ffdd00;
    }

    &::before {
        content: '';
        z-index: -1;
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: #5e593f;
        background-image: url("../img/shop/sports-bg2.avif");
        opacity: .85;
        background-size: cover;
        background-position: center;
        background-blend-mode: multiply;
    }
}

.banner-tent {
    width: 98%;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    #txt-cont {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        #tent-cont {

            & h3 {
                font-size: 1rem;
                font-weight: 600;
            }

            & h6 {
                font-size: .8rem;
                line-height: 1.4rem;
            }
        }
    }

    & img {
        width: 100%;
    }
}

.shop {
    width: 98%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;

    #shop-body {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin: 0 auto;
    }
}

@media(min-width: 425px) {

    .shop-banner {

        .model1 {
            left: -25%;
        }

        .model2 {
            right: -20%;
        }
    }
}

@media(min-width: 768px) {

    .shop-banner {

        .shop-cont {
    
            .logo {
                aspect-ratio: 1/1;
                width: 200px;
                margin: 20px 0 20px 0;
            }
        }

        .model1, .model2 {
            position: absolute;
            bottom: 0px;
            height: 80%;
        } 

        .model1 {
            left: 2%;
        }

        .model2 {
            right: 1%;        }
    }

    .hero {
        width: 100%;
        height: 250px;

        .hero-sml {
            display: none;
        }

        .hero-lrg {
            display: block;
        }
    }

    .banner-tent {
        width: 95%;
        margin: 0 auto;

        flex-direction: row;

        #txt-cont {
            width: 40%;
            height: 100%;
            padding-left: 20px;

            flex-direction: column;
    
            #tent-cont {
                & h3 {
                    font-size: 1.4rem;
                }
    
                & h6 {
                    font-size: 1.2rem;
                }
            }
        }

        & img {
            width: 60%;
        }
    }

    .shop {
        width: 95%;

        #shop-body {
            margin: 0;
            grid-template-columns: repeat(4, 1fr);
            gap: .8rem;
        }
    }
}

@media(min-width: 1024px) {
    .shop-banner {
        height: 35vw;
        max-height: 650px;

        .model1 {
            left: 10%;
        }

        .model2 {
            right: 10%;
        }
    }

    .banner-tent {
        width: 85%;

        #txt-cont {
            #tent-cont {
                & h6 {
                    font-size: 1.2rem;
                }
            }
        }
    }

    .shop {
        width: 85%;
        #shop-body {
            grid-template-columns: repeat(5, 1fr);
        }
    } 
}


@media(min-width: 1440px) {
    .shop-banner {
        border: 1px solid #111;
        max-height: 950px;

        .model1 {
            left: 15%;
        }

        .model2 {
            right: 15%;
        }
    }  
}