/*
  KVEON reusable 12-column CSS Grid
  ---------------------------------
  Desktop: 12 columns
  Tablet: 8 columns
  Mobile: 1 column

  Example:
  <div class="grid-12">
    <div class="span-5">...</div>
    <div class="span-7">...</div>
  </div>
*/

.grid-12 {
  --grid-columns: 12;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: clamp(18px, 2vw, 32px);
  row-gap: clamp(18px, 2vw, 32px);
}

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

.start-1 { grid-column-start: 1; }
.start-2 { grid-column-start: 2; }
.start-3 { grid-column-start: 3; }
.start-4 { grid-column-start: 4; }
.start-5 { grid-column-start: 5; }
.start-6 { grid-column-start: 6; }
.start-7 { grid-column-start: 7; }
.start-8 { grid-column-start: 8; }
.start-9 { grid-column-start: 9; }
.start-10 { grid-column-start: 10; }
.start-11 { grid-column-start: 11; }
.start-12 { grid-column-start: 12; }

@media (max-width: 980px) {
  .grid-12 { --grid-columns: 8; }
  .grid-12 > [class*="span-"] { grid-column: span 8; }
  .tablet-span-4 { grid-column: span 4 !important; }
  .tablet-span-8 { grid-column: span 8 !important; }
}

@media (max-width: 680px) {
  .grid-12 { --grid-columns: 1; }
  .grid-12 > [class*="span-"] { grid-column: 1 / -1; }
}