@layer pages {
  /* Phones and tablets, or any screen without hover: tiles are stacked and
     their description is always visible (B.9). */
  .home__badge {
    display: grid;
    place-items: center;
    padding: var(--space) 0;
  }

  .home__logo { width: auto; height: 7rem; }

  .home__grid {
    display: grid;
    gap: 6px;
    background: var(--color-white);
  }

  .tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    color: var(--color-blue-dark);
    text-decoration: none;
  }

  .tile__inner,
  .tile__face { display: block; height: 100%; }

  .tile__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Title on a white band, 20 % transparent (B.5) */
  .tile__label {
    position: absolute;
    inset: auto 0 0 0;
    display: block;
    padding: var(--space-half) var(--space);
    background: rgb(255 255 255 / 0.8);
    text-align: center;
  }

  .tile__title {
    display: block;
    font-size: var(--text-large);
    font-weight: bold;
  }

  .tile__description {
    display: block;
    font-size: var(--text-small);
    color: var(--color-ink);
  }

  .tile__face--back { display: none; }

  /* Desktop: a 2 x 2 grid split by thin white bands, the logo on a round badge
     where they cross (B.2, B.3), and tiles that turn over (B.6). */
  @media (hover: hover) and (pointer: fine) and (min-width: 48rem) {
    .home {
      position: relative;
      flex: none;
      height: calc(100dvh - var(--footer-height));
      min-height: 30rem;
    }

    .home__grid {
      height: 100%;
      grid-template: 1fr 1fr / 1fr 1fr;
    }

    .home__badge {
      --badge-size: clamp(8rem, 18vmin, 12rem);

      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 5;
      translate: -50% -50%;
      width: var(--badge-size);
      height: var(--badge-size);
      padding: 0;
      border-radius: 50%;
      background: var(--color-white);
      box-shadow: 0 0 0 6px var(--color-white), 0 0.3rem 1.2rem rgb(0 0 0 / 0.25);
      pointer-events: none;
    }

    /* The logo is taller than wide: about 70 % of the badge (B.4) */
    .home__logo { height: calc(var(--badge-size) * 0.7); }

    .tile {
      aspect-ratio: auto;
      overflow: visible;
      perspective: 1400px;
    }

    .tile__inner {
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.6s ease;
    }

    .tile--flipped .tile__inner,
    .tile:focus-visible .tile__inner { transform: rotateY(180deg); }

    .tile__face {
      position: absolute;
      inset: 0;
      overflow: hidden;
      backface-visibility: hidden;
    }

    .tile__face--front .tile__label {
      inset: 50% auto auto 50%;
      translate: -50% -50%;
      width: max-content;
      max-width: 80%;
      padding: var(--space) var(--space-double);
      box-shadow: 0 0.2rem 1rem rgb(0 0 0 / 0.15);
      cursor: pointer;
    }

    .tile__face--front .tile__description { display: none; }

    .tile__face--back {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: var(--space);
      padding: var(--space-double);
      background: var(--color-blue);
      text-align: center;
      transform: rotateY(180deg);
    }

    .tile__face--back .tile__title { color: var(--color-white); }

    .tile__face--back .tile__description {
      max-width: 24rem;
      color: var(--color-blue-light);
      font-size: var(--text-normal);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tile__inner { transition: none; }
  }
}