body{
    --l  : 1560px;
    --m  : 1024px;
    --s  : 768px;
    --xs : 480px;
}

[class*='v-']{
    display: grid;
    grid-gap: 10px;
}

/* XL */
@media (min-width: 1560px){
    .v-6{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
    .v-5{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
    .v-4{ grid-template-columns: 1fr 1fr 1fr 1fr; }
    .v-3{ grid-template-columns: 1fr 1fr 1fr; }
    .v-2{ grid-template-columns: 1fr 1fr; }
}

/* L */
@media (max-width: 1560px){
    .v-6{ grid-template-columns: 1fr 1fr 1fr 1fr; }
    .v-5{ grid-template-columns: 1fr 1fr 1fr 1fr; }
    .v-4{ grid-template-columns: 1fr 1fr 1fr 1fr; }
    .v-3{ grid-template-columns: 1fr 1fr 1fr; }
    .v-2{ grid-template-columns: 1fr 1fr; }
}

/* M */
@media (max-width: 1024px){
    .v-6{ grid-template-columns: 1fr 1fr; }
    .v-5{ grid-template-columns: 1fr 1fr; }
    .v-4{ grid-template-columns: 1fr 1fr; }
    .v-3{ grid-template-columns: 1fr 1fr; }
    .v-2{ grid-template-columns: 1fr 1fr; }
}

/* S */
@media (max-width: 768px){
    .v-6{ grid-template-columns: 1fr; }
    .v-5{ grid-template-columns: 1fr; }
    .v-4{ grid-template-columns: 1fr; }
    .v-3{ grid-template-columns: 1fr; }
    .v-2{ grid-template-columns: 1fr; }
}

/* XS */
@media (max-width: 480px){
    .v-6{ grid-template-columns: 1fr; }
    .v-5{ grid-template-columns: 1fr; }
    .v-4{ grid-template-columns: 1fr; }
    .v-3{ grid-template-columns: 1fr; }
    .v-2{ grid-template-columns: 1fr; }
}