@layer pages {
  .guestbook {
    & .guestbook-error {
      color: var(--color-danger);
    }

    & .guestbook-smiles {
      display: flex;
      grid-column: 3;
      grid-row: 3;
      align-self: stretch;
      align-content: start;
      flex-flow: column wrap;
      gap: var(--space-4);
      min-block-size: 0;
      margin-block-start: calc(-1 * var(--space-12));
      margin-inline-start: var(--space-32);
      contain: size;

      &[hidden] {
        display: none;
      }

      & button {
        display: inline-grid;
        place-items: center;
        inline-size: 32px;
        block-size: 32px;
        padding: 0;
        border: 0;
        background: none;
      }
    }

    & img {
      image-rendering: pixelated;
      vertical-align: middle;
    }

    & .guestbook-entries {
      padding-block-end: var(--space-40);
    }

    & .guestbook-list {
      columns: 3 18rem;
      column-gap: var(--space-48);
      margin: 0;
      padding: 0;
      list-style: none;

      & li {
        break-inside: avoid;
        padding-block-end: var(--space-32);
      }

      & h3 {
        margin: 0;
        font-size: var(--text-h3);
      }

      & p {
        margin: var(--space-4) 0 0;
      }

      & header p {
        color: var(--color-muted);
        font-size: var(--text-small);
        line-height: var(--leading-small);
      }
    }

    & :is(.guestbook-message, bdi) {
      overflow-wrap: anywhere;
    }

    & .guestbook-message {
      white-space: pre-wrap;
      unicode-bidi: plaintext;
    }

    @media (max-width: 790px) {
      & .guestbook-smiles {
        grid-column: 1 / -1;
        grid-row: auto;
        align-self: auto;
        flex-direction: row;
        margin: 0;
        contain: none;
      }
    }
  }
}