.products {
    margin-top: 30px;
}

.products__content {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(9, 1fr);
    margin-top: 50px;
}

.products__content>div {
    grid-row: span 3 / span 3;
}

.products__content>div:nth-child(8n+4):nth-child(-n+6) {
    grid-row-start: 4;
}

.products__content>div:nth-child(8n+7):nth-child(-n+8) {
    grid-row-start: 7;
}

.products__content>div:nth-child(8n) {
    grid-column: span 2 / span 2;
}

@media (max-width: 768px) {
    .products {margin-top: 15px;}
    .products button {margin-top: 40px;}

    .products__content {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(6, auto);
        margin-top: 40px;
    }
    
    .products__content > div:nth-child(3n-2) {
        grid-column: span 2;
        grid-row: span 2;
        grid-row-start: auto;
    }
    
    .products__content > div:nth-child(3n-1),
    .products__content > div:nth-child(3n) {
        grid-column: span 1;
        grid-row: span 2;
    }
}

@media (max-width: 576px) {
    .products__content {
        grid-template-columns: 1fr;
        grid-template-rows: auto !important;
        margin-top: 30px;
    }

    .products__content > div {
        grid-column: auto !important;
        grid-row: auto !important;
        grid-row-start: auto !important;
    }

    .products button {
        margin-top: 30px;
        height: 70px;
    }
}