@layer components {
  .row__container {
    display: var(--row-display, flex);
    position: var(--row-position, relative);
  }

  .row {
    inline-size: var(--row-inline-size, auto);
    min-inline-size: var(--row-min-inline-size, auto);
    max-inline-size: var(--row-max-inline-size, auto);
    margin-inline: var(--row-margin-inline, 0);
    padding-inline: var(--row-padding-inline, var(--inline-space));

    @media (width >= 64rem) {
      --row-padding-inline: var(--inline-space-double);
    }
  }

  .row--responsive {
    --row-inline-size: 100%;
    --row-min-inline-size: 0;
    --row-max-inline-size: var(--breakpoint-2xl);
    --row-margin-inline: auto;
  }
}