@layer pages {
  .page {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-double) var(--space);
  }

  .page__contents {
    padding: var(--space) var(--space-double);
    border-radius: var(--radius);
    background: var(--color-blue-lightest);
  }

  .page__contents ol { margin: 0; padding-inline-start: 1.2em; }

  .page h2 { scroll-margin-top: calc(var(--navigation-height) + var(--space)); }

  /* Newsletter on the left, prayer intention on the right (F.1, F.2) */
  .follow {
    width: 100%;
    max-width: var(--wide-width);
    margin: 0 auto;
    padding: var(--space-double) var(--space);
  }

  .follow__columns {
    display: grid;
    gap: var(--space-double);
  }

  @media (min-width: 48rem) {
    .follow__columns { grid-template-columns: 1fr 1fr; }
  }

  .follow__column {
    padding: var(--space) var(--space-double) var(--space-double);
    border-radius: var(--radius);
    background: var(--color-blue-lightest);
  }

  .follow__column h2 { margin-top: var(--space); }

  .consent-frame__iframe {
    width: 100%;
    height: 38rem;
    border: 0;
    background: var(--color-white);
  }

  .intentions__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .intentions__item {
    padding: var(--space) 0;
    border-bottom: 1px solid var(--color-grey-light);
  }

  .intentions__text {
    margin: 0;
    font-style: italic;
  }

  .intentions__date {
    color: var(--color-grey);
    font-size: var(--text-small);
  }

  .form {
    display: flex;
    flex-direction: column;
    gap: var(--space);
    max-width: 32rem;
  }

  .form__field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .form__field label { font-weight: bold; }

  .form__check {
    display: flex;
    align-items: center;
    gap: var(--space-half);
  }

  .form input[type="text"],
  .form input[type="email"],
  .form input[type="password"],
  .form input[type="number"],
  .form input[type="date"],
  .form textarea {
    width: 100%;
    padding: 0.5em 0.7em;
    border: 1px solid var(--color-grey-light);
    border-radius: var(--radius);
    background: var(--color-white);
    color: inherit;
    font: inherit;
  }

  .form input:disabled { background: var(--color-grey-lightest); }

  .form .button { align-self: flex-start; }

  .form__trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .form__note {
    margin: 0;
    color: var(--color-grey);
    font-size: var(--text-small);
  }

  .form__notice {
    margin: 0;
    padding: var(--space-half) var(--space);
    border-radius: var(--radius);
    background: var(--color-blue-light);
    color: var(--color-blue-dark);
  }
}