@layer composition {
  .egrp-shell {
    width: min(100% - 2.5rem, var(--egrp-shell));
    margin-inline: auto;
  }

  .egrp-shell-narrow {
    width: min(100% - 2.5rem, 58rem);
    margin-inline: auto;
  }

  .egrp-flow > * + * {
    margin-block-start: var(--egrp-flow-space, var(--egrp-space-s));
  }

  .egrp-flow-l > * + * {
    margin-block-start: var(--egrp-space-l);
  }

  .egrp-region {
    padding-block: var(--egrp-space-2xl);
  }

  .egrp-region-tight {
    padding-block: var(--egrp-space-xl);
  }

  .egrp-band {
    width: 100%;
    padding-block: var(--egrp-space-2xl);
  }

  .egrp-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--egrp-cluster-gap, var(--egrp-space-s));
    align-items: center;
  }

  .egrp-cluster-between {
    display: flex;
    flex-wrap: wrap;
    gap: var(--egrp-space-s);
    align-items: center;
    justify-content: space-between;
  }

  .egrp-stack-end {
    display: flex;
    flex-direction: column;
    gap: var(--egrp-space-2xs);
  }

  .egrp-grid {
    display: grid;
    gap: var(--egrp-grid-gap, var(--egrp-space-l));
  }

  .egrp-grid-2 {
    display: grid;
    gap: var(--egrp-space-l);
    grid-template-columns: 1fr;
  }

  .egrp-grid-3 {
    display: grid;
    gap: var(--egrp-space-l);
    grid-template-columns: 1fr;
  }

  .egrp-grid-4 {
    display: grid;
    gap: var(--egrp-space-m);
    grid-template-columns: 1fr;
  }

  .egrp-split {
    display: grid;
    gap: var(--egrp-space-xl);
    grid-template-columns: 1fr;
    align-items: start;
  }

  .egrp-measure {
    max-width: var(--egrp-measure);
  }

  .egrp-center-text {
    text-align: center;
    margin-inline: auto;
  }

  @media (min-width: 48rem) {
    .egrp-grid-2 {
      grid-template-columns: repeat(2, 1fr);
    }

    .egrp-grid-3 {
      grid-template-columns: repeat(2, 1fr);
    }

    .egrp-grid-4 {
      grid-template-columns: repeat(2, 1fr);
    }

    .egrp-split {
      grid-template-columns: var(--egrp-split-cols, 1.15fr 0.85fr);
      gap: var(--egrp-space-2xl);
    }

    .egrp-split-reverse {
      --egrp-split-cols: 0.85fr 1.15fr;
    }
  }

  @media (min-width: 64rem) {
    .egrp-grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }

    .egrp-grid-4 {
      grid-template-columns: repeat(4, 1fr);
    }

    .egrp-offset-grid {
      grid-template-columns: repeat(12, 1fr);
    }
  }
}