/* Tablet (8-col): small → xxx-small constrain; larger sizes remain full width */
@media (width >= 744px) {
  .block.width-small,
  .block.width-x-small,
  .block.width-xx-small,
  .block.width-xxx-small {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--corp-gap-lg);
  }

  /* Default (centered) column spans at tablet */
  .block.width-small > * {
    grid-column: 1 / span 7;
    transform: translateX(calc(100% / 14));
  } /* 7 of 8 */
  .block.width-x-small > * {
    grid-column: 2 / 8;
  } /* 6 of 8 */
  .block.width-xx-small > * {
    grid-column: 2 / span 5;
    transform: translateX(calc(100% / 10));
  } /* 5 of 8 */
  .block.width-xxx-small > * {
    grid-column: 3 / 7;
  } /* 4 of 8 */

  /* Left-aligned at tablet */
  .block.width-small.align-left > * {
    grid-column: 1 / 8;
    transform: none;
  }

  .block.width-x-small.align-left > * {
    grid-column: 1 / 7;
  }

  .block.width-xx-small.align-left > * {
    grid-column: 1 / 6;
    transform: none;
  }

  .block.width-xxx-small.align-left > * {
    grid-column: 1 / 5;
  }

  /* Right-aligned at tablet */
  .block.width-small.align-right > * {
    grid-column: 2 / -1;
    transform: none;
  }

  .block.width-x-small.align-right > * {
    grid-column: 3 / -1;
  }

  .block.width-xx-small.align-right > * {
    grid-column: 4 / -1;
    transform: none;
  }

  .block.width-xxx-small.align-right > * {
    grid-column: 5 / -1;
  }
}

/* Desktop (12-col): all sizes apply column spans */
@media (width >= 1024px) {
  .block.width-xxx-large,
  .block.width-xx-large,
  .block.width-x-large,
  .block.width-large,
  .block.width-medium,
  .block.width-small,
  .block.width-x-small,
  .block.width-xx-small,
  .block.width-xxx-small {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--corp-gap-lg);
    row-gap: 0;
  }

  /* Default (centered) column spans at desktop */
  .block.width-xxx-large > * {
    grid-column: 1 / -1;
  } /* 12 col */
  .block.width-xx-large > * {
    grid-column: 1 / span 11;
    transform: translateX(calc(100% / 22));
  } /* 11 col */
  .block.width-x-large > * {
    grid-column: 2 / 12;
  } /* 10 col */
  .block.width-large > * {
    grid-column: 2 / span 9;
    transform: translateX(calc(100% / 18));
  } /*  9 col */
  .block.width-medium > * {
    grid-column: 3 / 11;
  } /*  8 col */
  .block.width-small > * {
    grid-column: 3 / span 7;
    transform: translateX(calc(100% / 14));
  } /*  7 col */
  .block.width-x-small > * {
    grid-column: 4 / 10;
  } /*  6 col */
  .block.width-xx-small > * {
    grid-column: 4 / span 5;
    transform: translateX(calc(100% / 10));
  } /*  5 col */
  .block.width-xxx-small > * {
    grid-column: 5 / 9;
  } /*  4 col */

  /* Left-aligned at desktop */
  .block.width-xx-large.align-left > * {
    grid-column: 1 / span 11;
    transform: none;
  }

  .block.width-x-large.align-left > * {
    grid-column: 1 / 11;
  }

  .block.width-large.align-left > * {
    grid-column: 1 / span 9;
    transform: none;
  }

  .block.width-medium.align-left > * {
    grid-column: 1 / 9;
  }

  .block.width-small.align-left > * {
    grid-column: 1 / span 7;
    transform: none;
  }

  .block.width-x-small.align-left > * {
    grid-column: 1 / 7;
  }

  .block.width-xx-small.align-left > * {
    grid-column: 1 / span 5;
    transform: none;
  }

  .block.width-xxx-small.align-left > * {
    grid-column: 1 / 5;
  }

  /* Right-aligned at desktop */
  .block.width-xx-large.align-right > * {
    grid-column: 2 / -1;
    transform: none;
  }

  .block.width-x-large.align-right > * {
    grid-column: 3 / -1;
  }

  .block.width-large.align-right > * {
    grid-column: 4 / -1;
    transform: none;
  }

  .block.width-medium.align-right > * {
    grid-column: 5 / -1;
  }

  .block.width-small.align-right > * {
    grid-column: 6 / -1;
    transform: none;
  }

  .block.width-x-small.align-right > * {
    grid-column: 7 / -1;
  }

  .block.width-xx-small.align-right > * {
    grid-column: 8 / -1;
    transform: none;
  }

  .block.width-xxx-small.align-right > * {
    grid-column: 9 / -1;
  }
}