/* ROW */
.row{
    display: grid;
    /* gap: var(--spacing-4); */
    grid-template-columns: repeat(12, 1fr);

    &.row-col-1{grid-template-columns: repeat(1, 1fr);}
    &.row-col-2{grid-template-columns: repeat(2, 1fr);}
    &.row-col-3{grid-template-columns: repeat(3, 1fr);}
    &.row-col-4{grid-template-columns: repeat(4, 1fr);}
    &.row-col-5{grid-template-columns: repeat(5, 1fr);}
    &.row-col-6{grid-template-columns: repeat(6, 1fr);}
    &.row-col-7{grid-template-columns: repeat(7, 1fr);}
    &.row-col-8{grid-template-columns: repeat(8, 1fr);}
    &.row-col-9{grid-template-columns: repeat(9, 1fr);}
    &.row-col-10{grid-template-columns: repeat(10, 1fr);}
    &.row-col-11{grid-template-columns: repeat(11, 1fr);}
    &.row-col-12{grid-template-columns: repeat(12, 1fr);}

    & .col-1{grid-column: span 1;}
    & .col-2{grid-column: span 2;}
    & .col-3{grid-column: span 3;}
    & .col-4{grid-column: span 4;}
    & .col-5{grid-column: span 5;}
    & .col-6{grid-column: span 6;}
    & .col-7{grid-column: span 7;}
    & .col-8{grid-column: span 8;}
    & .col-9{grid-column: span 9;}
    & .col-10{grid-column: span 10;}
    & .col-11{grid-column: span 11;}
    & .col-12{grid-column: span 12;}
}
.row-content{width: min-content; display: grid; gap: var(--spacing-4); grid-template-columns: repeat(12, 1fr);}
.row-content-response{display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));}

@media (width >= 640px) { /* 40rem */
    .row{
        & .sm\:col-1{grid-column: span 1;}
        & .sm\:col-2{grid-column: span 2;}
        & .sm\:col-3{grid-column: span 3;}
        & .sm\:col-4{grid-column: span 4;}
        & .sm\:col-5{grid-column: span 5;}
        & .sm\:col-6{grid-column: span 6;}
        & .sm\:col-7{grid-column: span 7;}
        & .sm\:col-8{grid-column: span 8;}
        & .sm\:col-9{grid-column: span 9;}
        & .sm\:col-10{grid-column: span 10;}
        & .sm\:col-11{grid-column: span 11;}
        & .sm\:col-12{grid-column: span 12;}
    }
}

@media (width >= 768px) { /* 48rem */
    .row{
        & .md\:col-1{grid-column: span 1;}
        & .md\:col-2{grid-column: span 2;}
        & .md\:col-3{grid-column: span 3;}
        & .md\:col-4{grid-column: span 4;}
        & .md\:col-5{grid-column: span 5;}
        & .md\:col-6{grid-column: span 6;}
        & .md\:col-7{grid-column: span 7;}
        & .md\:col-8{grid-column: span 8;}
        & .md\:col-9{grid-column: span 9;}
        & .md\:col-10{grid-column: span 10;}
        & .md\:col-11{grid-column: span 11;}
        & .md\:col-12{grid-column: span 12;}
    }
}

@media (width >= 1024px) { /* 64rem */
    .row {
        & .lg\:col-1{grid-column: span 1;}
        & .lg\:col-2{grid-column: span 2;}
        & .lg\:col-3{grid-column: span 3;}
        & .lg\:col-4{grid-column: span 4;}
        & .lg\:col-5{grid-column: span 5;}
        & .lg\:col-6{grid-column: span 6;}
        & .lg\:col-7{grid-column: span 7;}
        & .lg\:col-8{grid-column: span 8;}
        & .lg\:col-9{grid-column: span 9;}
        & .lg\:col-10{grid-column: span 10;}
        & .lg\:col-11{grid-column: span 11;}
        & .lg\:col-12{grid-column: span 12;}
    }
}

@media (width >= 1280px) { /* 80rem */
    .row {
        & .xl\:col-1{grid-column: span 1;}
        & .xl\:col-2{grid-column: span 2;}
        & .xl\:col-3{grid-column: span 3;}
        & .xl\:col-4{grid-column: span 4;}
        & .xl\:col-5{grid-column: span 5;}
        & .xl\:col-6{grid-column: span 6;}
        & .xl\:col-7{grid-column: span 7;}
        & .xl\:col-8{grid-column: span 8;}
        & .xl\:col-9{grid-column: span 9;}
        & .xl\:col-10{grid-column: span 10;}
        & .xl\:col-11{grid-column: span 11;}
        & .xl\:col-12{grid-column: span 12;}
    }
}

@media (width >= 1536px) { /* 96rem */
    .row{
        & .\32xl\:col-1{grid-column: span 1;}
        & .\32xl\:col-2{grid-column: span 2;}
        & .\32xl\:col-3{grid-column: span 3;}
        & .\32xl\:col-4{grid-column: span 4;}
        & .\32xl\:col-5{grid-column: span 5;}
        & .\32xl\:col-6{grid-column: span 6;}
        & .\32xl\:col-7{grid-column: span 7;}
        & .\32xl\:col-8{grid-column: span 8;}
        & .\32xl\:col-9{grid-column: span 9;}
        & .\32xl\:col-10{grid-column: span 10;}
        & .\32xl\:col-11{grid-column: span 11;}
        & .\32xl\:col-12{grid-column: span 12;}
    }
}