_products.scss

/*=============== PRODUCTS ===============*/
.product{
    &__description{
        text-align: center;
    }
    &__container{
        padding: 3rem 0;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem 3rem;
    }
    &__card{
        display: grid;
        position: relative;

        &:hover .product__img{
            transform: translateY(-.5rem);
        }
    }
    &__img{
        position: relative;
        width: 120px;
        justify-self: center;
        margin-bottom: var(--mb-0-75);
        transition: .3s;
    }
    &__title,
    &__price{
        font-size: var(--small-font-size);
        font-weight: var(--font-semi-bold);
        color: var(--title-color);
    }
    &__title{
        margin-bottom: .25rem;
    }
    &__button{
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: var(--first-color);
        color: #FFF;
        padding: .25rem;
        border-radius: .35rem;
        font-size: 1.15rem;

        &:hover{
            background-color: var(--first-color-alt);
        }
    }
    &__circle{
        width: 90px;
        height: 90px;
        background-color: var(--first-color-lighten);
        border-radius: 50%;
        position: absolute;
        top: 18%;
        left: 5%;
    }
}