@layer utils {
  .clipped {
    clip-path: polygon(var(--size, 10px) 0%, 100% 0, 100% calc(100% - var(--size, 10px)), calc(100% - var(--size, 10px)) 100%, 0 100%, 0% var(--size, 10px));

    &.-large {
      --size: 20px;
    }

    &.-normal {
      --size: 10px;
    }

    &.-small {
      --size: 5px;
    }
  }

  .spacer {
    padding-block: var(--space-section-md);
  }

  .container {
    inline-size: min(calc(100% - 2rem), var(--inline-size, 72rem));
    margin-inline: auto;

    &.-large {
      --inline-size: 96rem;
    }
  }

  .grid {
    display: grid;
    grid-gap: 1.5rem;
    grid-template-columns: repeat(12, 1fr);

    > * {
      min-inline-size: 0;
    }
  }

  .span-3 {
    grid-column: span 3 / span 3;

    @media (width < 45rem) {
      grid-column: span 6 / span 6;
    }

    @media (width < 30rem) {
      grid-column: span 12 / span 12;
    }
  }

  .span-4 {
    grid-column: span 4 / span 4;

    @media (width < 45rem) {
      grid-column: span 6 / span 6;
    }

    @media (width < 30rem) {
      grid-column: span 12 / span 12;
    }
  }

  .span-6 {
    grid-column: span 6 / span 6;

    @media (width < 45rem) {
      grid-column: span 12 / span 12;
    }
  }

  .span-8 {
    grid-column: span 8 / span 8;

    @media (width < 45rem) {
      grid-column: span 12 / span 12;
    }
  }

  .span-12 {
    grid-column: span 12 / span 12;
  }
}