.intro-container
{
    display: grid;
    grid-template-columns: 1fr;
}

.intro-image
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro-image img
{
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 1rem;
}

.intro-content
{
    margin-bottom: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.intro-content-brand
{
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary-color);
}

.intro-content-description
{
    margin-top: 1.5rem;
}

.intro-content-action
{
    margin-top: 3rem;
    display: flex;
    gap: 1rem;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.intro-content-action a
{
    padding: .5rem 1.25rem;
    border-radius: 99999px;
}

.intro-content-action-products
{
    background-color: var(--primary-color);
    color: white;
}

.intro-content-action-posts
{
    background-color: hsl(0 , 0% , 95%);
}

.title
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .75rem;
    margin-bottom: 2rem;
}

.shape
{
    width: .35rem;
    height: 2.5rem;
    background-color: var(--primary-color);
    border-radius: 9999px;
}



.section-container
{
    margin-bottom: 7rem;
}

.products-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 15px;
    padding: 10px;
    -webkit-overflow-scrolling: touch;
}


.product
{
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    padding: 1rem;
    border-radius: 1rem;
}

.product img
{
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: .5rem;
}

.product-title
{
    margin-top: .5rem;
}

.product-price
{
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    gap: .25rem;
    font-weight: bold;
    margin-top: 1rem;
}

.products-container
{
    display: grid;
    grid-template-columns: repeat(auto-fill , minmax(10rem , 1fr));
    gap: 1rem;
}


.posts-container
{
    display: grid;
    grid-template-columns: repeat(auto-fill , minmax(16rem , 1fr));
    gap: 1rem;
}

.post
{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    padding: 1rem;
    position: relative;
    border-radius: 1rem;
}


.post img
{
    width: 100%;
    height: auto;
    border-radius: .5rem;
}

.post-title
{
    margin-top: .5rem;
}

@media (min-width: 48rem) {


    .intro-container
    {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .intro-content
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }


    .intro-image img
    {
        width: 70%;
    }
}