@layer styles {
  .section {
    margin-top: var(--space--large);
  }

  .section--condensed {
    margin-top: var(--space--small);
  }

  .section--full-width {
    margin-left: 0;
    margin-right: 0;
    padding: var(--space--medium) var(--page__margin);
  }

  .meko-partner-info {
    --meko-partner__space-between: var(--space--small);

    display: grid;
    grid-gap: var(--meko-partner__space-between);
  }

  @media (min-width: 600px) {
    .meko-partner-info {
      --meko-partner__space-between: var(--space--medium);

      grid-template-columns: 1fr 300px;
    }
  }

  @media (min-width: 900px) {
    .meko-partner-info {
      --meko-partner__space-between: var(--space--extra-large);
    }
  }

  .form__content {
    --form__columns: 1;

    display: grid;
    grid-gap: var(--space__small);
    grid-template-columns: repeat(var(--form__columns), 1fr);
    margin-top: var(--space--small);
  }

  @media (min-width: 600px) {
    .form__content {
      --form__columns: 2;
    }
  }

  .form__label {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: var(--space--small);
    text-transform: uppercase;
  }

  .form__label--full-width {
    grid-column: 1/-1;
  }

  .form__input {
    background: none;
    border: none;
    border-bottom: 1px solid var(--font__color);
    cursor: pointer;
    display: block;
    margin-bottom: var(--space--extra-small);
    padding: 0.2rem;
  }

  .form__submit {
    background: none;
    /* The width is sized inside the padding; border-box would narrow it. */
    box-sizing: content-box;
    cursor: pointer;
    max-width: 8rem;
    padding: var(--space--extra-small);
  }
}