.produtos .content .produtos {
    --prd-qtd-columns: 3;

    gap: 3rem 1.5rem;

    .course-item, .plan-item {
        width: calc((100% - (1.5rem * (var(--prd-qtd-columns) - 1))) / var(--prd-qtd-columns));
    }
}

@media (max-width: 768px) {
    .produtos .content .produtos {--prd-qtd-columns: 2;}
}

@media (max-width: 600px) {
    .produtos .content .produtos {
        --prd-qtd-columns: 1;
        
        gap: 2rem;
    }
}