/* Navy closing band at the end of marketing pages; its button is the page's last yellow element */
@layer components {
  .home-close {
    --color-focus: var(--color-primary-300);

    color: var(--color-white);
    background: var(--color-primary-900);

    .home-section__title,
    .audit-form__label {
      color: var(--color-white);
    }

    .btn--primary {
      color: var(--color-primary-900);
      background-color: var(--color-accent);
      border-color: var(--color-accent);

      &:hover,
      &:active {
        color: var(--color-primary-900);
        background-color: var(--color-accent-hover);
        border-color: var(--color-accent-hover);
      }
    }

    .home-close__container {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: var(--space-20);
      align-items: center;
      max-width: var(--page-width);
      margin: 0 auto;
      padding: var(--space-24) var(--space-6);
    }

    p {
      margin-top: var(--space-5);
      font-size: var(--text-lg);
      color: var(--color-primary-200);
      text-wrap: pretty;
    }
  }

  @media (max-width: 960px) {
    .home-close .home-close__container {
      grid-template-columns: 1fr;
      gap: var(--space-8);
      padding-top: var(--space-16);
      padding-bottom: var(--space-16);
    }
  }
}