div.content.products {
    display: grid; 
    gap: 40px; 
    grid-template-columns: repeat(auto-fill, 300px); 

    justify-content: center;
}

div.content.products > a > div.product {
    border: 1px solid var(--divider);
    border-radius: 6px;

    width: 300px;
    
    display: flex;
    flex-direction: column;
    overflow: hidden;

    cursor: pointer;
}


div.content.products > a > div.product > img {
    width: 100%;

    object-fit: cover;
}

div.content.products > a > div.product > h3 {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 72px;
    width: 100%;
}

div.content.products > a > div.product > p {
    padding: 10px 15px;
    color: var(--gray2);
}

div.content.products > a > div.product > .details {
    padding: 16px 24px 24px 24px; 
}

div.content.products > a > div.product > .details > h3 {
    margin-bottom: 8px;
}

div.content.products > a > div.product > .details > p {
    color: var(--gray2);
    font-size: 16px;
    letter-spacing: 0.3px;
    line-height: 22px;

}

@media only screen and (max-width: 1024px) {
    div.content.products {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    div.content.products > a > div.product {
        width: auto;
    }

    div.content.products > a > div.product > .details > h3 {
    margin-bottom: 6px;
    }

    div.content.products > a > div.product > .details {
    padding: 12px 13px 13px 13px; 
    }


    div.content.products > a > div.product > .details > p {
        font-size: 13px;
        letter-spacing: 0.3px;
        line-height: 16px;

    }
}