.c-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: calc(var(--vw) * 20);
}

.c-layout--margin-bottom-0 {
  margin-bottom: 0;
}
.c-layout--padding-x {
  padding-left: calc(var(--vw) * 20);
  padding-right: calc(var(--vw) * 20);
}

.c-layout--padding-y {
  padding-top: calc(var(--vw) * 80);
}

.c-layout--padding-top-20 {
  padding-top: calc(var(--vw) * 20);
}

.c-layout--padding-top-24 {
  padding-top: calc(var(--vw) * 24);
}

.c-layout--padding-top-50 {
  padding-top: calc(var(--vw) * 50);
}

.c-layout--padding-bottom-24 {
  padding-bottom: calc(var(--vw) * 24);
}

.c-layout--hide-mobile {
  @media (max-width: 1023px) {
    display: none;
  }
}


/* Utilidades de span, de 1 a 12 columnas */
.c-layout__col-1  { grid-column: span 1; }
.c-layout__col-2  { grid-column: span 2; }
.c-layout__col-3  { grid-column: span 3; }
.c-layout__col-4  { grid-column: span 4; }
.c-layout__col-5  { grid-column: span 5; }
.c-layout__col-6  { grid-column: span 6; }
.c-layout__col-7  { grid-column: span 7; }
.c-layout__col-8  { grid-column: span 8; }
.c-layout__col-9  { grid-column: span 9; }
.c-layout__col-10 { grid-column: span 10; }
.c-layout__col-11 { grid-column: span 11; }
.c-layout__col-12 { grid-column: span 12; }



@media (max-width: 1023px) {
  .c-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .c-layout--padding-y {
  padding-top: calc(var(--vw) * 40);
}

  .c-layout--padding-x {
    padding-left: calc(var(--vw) * 16);
    padding-right: calc(var(--vw) * 16);
  }

  .c-layout [class*="c-layout__col-"] {
    grid-column: span 1;
  }

  .c-layout--column-reverse-mobile {
    display: flex;
    flex-direction: column-reverse;
  }
}