div.product
{
    flex: 0 1 33%;
    position: relative;
    height: 650px;
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}

div.product:hover div.gradient-bg
{
    opacity: 1;
}

div.product > div.gradient-bg
{
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    height: 95%;
    background-image: linear-gradient(-180deg, rgba(0,0,0,0), var(--orange));
    border-radius: 16px;
    opacity: 0;
    transition: opacity 0.35s ease;
}

div.product > div.image
{
    position: absolute;
    z-index: 2;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
}

div.product > div.image > img
{
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: var(--borderRadius);
}



div.product > div.price
{
    position: absolute;
    z-index: 3;
    right: 20%;
    background-color: var(--white);
    padding: 0.5rem;
    font-size: calc(var(--smallFontSize) + 0.5rem);
}

div.product > div.price > s
{
    font-size: calc(var(--smallFontSize) + 0.5rem);
    color: #999;
}


div.product > div.discount
{
    position: absolute;
    z-index: 4;
    right: 20%;
    top: 2.5rem;
    background-color: #81d109;
    color: var(--white);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: calc(var(--xsmallFontSize) + 0.2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}



div.product > div.text
{
    position: absolute;
    z-index: 5;
    top: 300px;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    padding: 1rem;
}

div.product > div.text > div
{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 1rem;
}

div.product > div.text > div > h2
{
    font-size: calc(var(--smallFontSize) + 1rem);
}

div.product > div.text > div > img
{
    height: 36px;
    cursor: pointer;
}

div.product > div.text > div > a.button_rounded_bg
{
    font-size: var(--smallFontSize);
    margin-top: 1rem;
}

div.product > div.text > p
{
    font-family: var(--displayLight);
    font-size: calc(var(--xsmallFontSize) + 0.3rem);
    line-height: 1.5;
}



div.indicator
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
}



div.whatsapp
{
    position: absolute;
    left: 2rem;
    top: 1rem;
    z-index: 7;
}


div.whatsapp > a > img
{
    width: 36px;
}




/* https://codepen.io/MdOS/pen/bGBGEa */

@media only screen 
and (min-width : 150px) 
and (max-width : 320px) {
    div.product
    {
        flex-basis: 100%;
    }
}

/* Just smartphones */
@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {
    div.product
    {
        flex-basis: 100%;
        height: 720px;
    }
}

/* Tablets and iPads */
@media only screen 
and (min-width : 480px) 
and (max-width : 1024px) {
    div.product
    {
        flex-basis: 50%;
    }
}

/* Laptops */
@media only screen and (min-width : 1224px) {
    div.product
    {
        flex-basis: 25%;
    }  
}

/* Desktops (with large screens) */
@media only screen and (min-width : 1824px) {
    div.product
    {
        flex-basis: 20%;
    }
}