@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), wide
     and low so that the intentions get the rest of the screen (review 4.5) */
  .follow {
    width: 100%;
    max-width: 96rem;
    margin: 0 auto;
    padding: var(--space) var(--space) var(--space-half);
  }

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

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

  .follow__column {
    container-type: inline-size;
    padding: var(--space-half) var(--space-double) var(--space);
    border-radius: var(--radius);
    background: var(--color-blue-lightest);
  }

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

  /* The Brevo form, shown smaller as set in the blog settings (review 4.4):
     drawn at full size, then scaled down inside a box of the reduced size. */
  .consent-frame:has(iframe) {
    height: calc(var(--newsletter-height) * var(--newsletter-zoom));
    overflow: hidden;
  }

  .consent-frame__iframe {
    width: calc(100% / var(--newsletter-zoom));
    height: var(--newsletter-height);
    border: 0;
    background: var(--color-white);
    transform: scale(var(--newsletter-zoom));
    transform-origin: 0 0;
  }

  /* The intentions scroll in their own box, down to the bottom of the screen */
  .intentions__list {
    max-height: 70dvh;
    margin: 0;
    padding: 0 var(--space);
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--color-grey-light);
    border-radius: var(--radius);
    background: var(--color-white);
  }

  @media (min-width: 48rem) {
    .follow { display: flex; flex-direction: column; }

    .intentions {
      display: flex;
      flex: 1 1 0;
      flex-direction: column;
      min-height: 14rem;
    }

    .intentions__list { flex: 1 1 0; max-height: none; min-height: 0; }
  }

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

  .intentions__item:last-child { border-bottom: 0; }

  .follow__contact {
    margin: var(--space) 0 0;
    font-size: var(--text-large);
    text-align: center;
  }

  .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);
  }

  /* Who on the left, the intention on the right, when there is room; after
     .form, which it rearranges */
  .intention-form { max-width: none; }

  .intention-form__who {
    display: flex;
    flex-direction: column;
    gap: var(--space-half);
  }

  .intention-form__text textarea { flex: 1; resize: vertical; }

  @container (min-width: 30rem) {
    .intention-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-half) var(--space-double);
    }

    .intention-form > :not(.intention-form__who, .intention-form__text) { grid-column: 1 / -1; }
    .intention-form > .button { justify-self: start; }
  }
}