/*/////////*/
/*  GRID  */
/*///////*/
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--spacing-24);
}

.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; }

.gap-4 { gap: var(--spacing-4); }

.gap-8 { gap: var(--spacing-8); }

.gap-12 { gap: var(--spacing-12); }

.gap-16 { gap: var(--spacing-16); }

.gap-20 { gap: var(--spacing-20); }

.gap-24 { gap: var(--spacing-24); }

.gap-32 { gap: var(--spacing-32); }

.gap-40 { gap: var(--spacing-40); }

@media (min-width: 640px) {
    .grid { gap: var(--spacing-24); }

    .col-1-sm { grid-column: span 1; }

    .col-2-sm { grid-column: span 2; }

    .col-3-sm { grid-column: span 3; }

    .col-4-sm { grid-column: span 4; }

    .col-5-sm { grid-column: span 5; }

    .col-6-sm { grid-column: span 6; }

    .col-7-sm { grid-column: span 7; }

    .col-8-sm { grid-column: span 8; }

    .col-9-sm { grid-column: span 9; }

    .col-10-sm { grid-column: span 10; }

    .col-11-sm { grid-column: span 11; }

    .col-12-sm { grid-column: span 12; }
}

@media (min-width: 960px) {
    .grid { gap: var(--spacing-60); }

    .col-1-md { grid-column: span 1; }

    .col-2-md { grid-column: span 2; }

    .col-3-md { grid-column: span 3; }

    .col-4-md { grid-column: span 4; }

    .col-5-md { grid-column: span 5; }

    .col-6-md { grid-column: span 6; }

    .col-7-md { grid-column: span 7; }

    .col-8-md { grid-column: span 8; }

    .col-9-md { grid-column: span 9; }

    .col-10-md { grid-column: span 10; }

    .col-11-md { grid-column: span 11; }

    .col-12-md { grid-column: span 12; }
}

.grid-align-center { align-items: center; }

.grid-client-landing {
    gap: 0;
    min-height: calc(100dvh - 24px);
}

.grid-client-items {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--spacing-24);
}

.grid-client-items-column { flex-direction: column; }