@import url("/base/variables&base.css");

.top-merch-container{
    display: flex;
    column-gap: 1.5rem;
    margin: 4rem 2rem 0;
}

.shop__product--all-border{
    border: 1px solid var(--color--brand--second--dark);
}

.shop__product--larger-border{
    border-top: 1px solid var(--color--brand--second--dark);
}

.shop__product--larger{
    width: 100%;
}

.shop__product--larger img{
    width: 100%;
    height: 600px;
    object-position: center;
}

#fitBottom{
    object-position: bottom;
}

.shop__product__button--larger{
    justify-content: flex-start;
    padding-left: 2rem;
    display: flex;
    column-gap: 0.5rem;
}

.coming-soon{
    border-top: 1px solid var(--color--brand--second--dark);
}

.coming-soon h2{
    margin: 3rem;
    font-size: var(--font-big-size);
    width: 250px;
}

.shop__product__content{
    margin-bottom: -1rem;
}


@media screen and (min-width: 300px) and (max-width: 767px) {
    .top-merch-container{
        padding: 2rem 0;
        flex-direction: column;
        row-gap: 3rem;
    }

    .coming-soon{
        border-top: none;
    }

    .coming-soon h2{
        margin: 3rem 2rem;
    }
}


@media screen and (min-width: 768px) and (max-width: 1254px){
    .top-merch-container{
        display: grid;
        padding: 2rem 0;
        grid-template-columns: repeat(2,1fr);
        row-gap: 2rem;
    }
}