/*
 * VIDA UI Grid
 * Desktop: 12 colunas | Tablet: 8 colunas | Mobile: 4 colunas.
 */
.vida-container {
  margin-inline: auto;
  max-width: var(--vida-container-max);
  padding-inline: var(--vida-grid-gutter-desktop);
  width: 100%;
}

.vida-grid {
  display: grid;
  gap: var(--vida-grid-gutter-desktop);
  grid-template-columns: repeat(var(--vida-grid-columns-desktop), minmax(0, 1fr));
  min-width: 0;
}

.vida-col-1 { grid-column: span 1; }
.vida-col-2 { grid-column: span 2; }
.vida-col-3 { grid-column: span 3; }
.vida-col-4 { grid-column: span 4; }
.vida-col-5 { grid-column: span 5; }
.vida-col-6 { grid-column: span 6; }
.vida-col-7 { grid-column: span 7; }
.vida-col-8 { grid-column: span 8; }
.vida-col-9 { grid-column: span 9; }
.vida-col-10 { grid-column: span 10; }
.vida-col-11 { grid-column: span 11; }
.vida-col-12,
.vida-col-full { grid-column: 1 / -1; }

/* --vida-breakpoint-tablet: 1200px */
@media (max-width: 1200px) {
  .vida-container { padding-inline: var(--vida-grid-gutter-tablet); }
  .vida-grid {
    gap: var(--vida-grid-gutter-tablet);
    grid-template-columns: repeat(var(--vida-grid-columns-tablet), minmax(0, 1fr));
  }
  :is(.vida-col-9, .vida-col-10, .vida-col-11, .vida-col-12) { grid-column: 1 / -1; }
}

/* --vida-breakpoint-mobile: 640px */
@media (max-width: 640px) {
  .vida-container { padding-inline: var(--vida-grid-gutter-mobile); }
  .vida-grid {
    gap: var(--vida-grid-gutter-mobile);
    grid-template-columns: repeat(var(--vida-grid-columns-mobile), minmax(0, 1fr));
  }
  :is(.vida-col-5, .vida-col-6, .vida-col-7, .vida-col-8, .vida-col-9, .vida-col-10, .vida-col-11, .vida-col-12) {
    grid-column: 1 / -1;
  }
}