.hero {
  display: flex;
  column-gap: var(--spacing-20);
  row-gap: var(--spacing-12);
  align-items: center;

  // Add inline padding to the hero, to match the layout bleed.
  padding-inline: var(--layout-bleed-width);
  // Adjust bottom margin according to layout rhythm.
  margin-block-end: var(--layout-area-spacing);

  h1,
  h2 {
    margin-block-end: var(--spacing-8);
  }

  p {
    // Apply a better text balancing algorithm, when available.
    text-wrap: balance;

    + p {
      // Add a little extra space between paragraphs (for the About page).
      margin-block-start: var(--spacing-4);
    }
  }

  img {
    border-radius: var(--border-radius-medium);

    // Optimize image for LCP, by defining a height and aspect ratio.
    height: 240px;
    aspect-ratio: 1;
    object-fit: cover;

    @media (hover: hover) and (prefers-reduced-motion: no-preference) {
      // Apply this effect only when hover is supported and the user has not
      // requested reduced motion. It's just for show, so it's not important.
      // The duration etc. here are entirely custom to this effect.
      transition: filter 1.5s ease;
      transition-delay: 1.5s;

      &:hover {
        // Add a little easter egg to the images.
        filter: saturate(200%);
      }
    }
  }

  footer {
    // Override generic `footer` styles here.
    display: block;
    padding-block: var(--spacing-8) 0;
    color: var(--color-text-lighter);

    // Make the text smaller and align it to the right.
    font-size: var(--font-sm);

    > a {
      // Remove underline from links.
      --link_color-underline: transparent;
      // Ensure that the links are displayed as inline blocks.
      display: inline-block;

      transition: color var(--animation-duration-short) ease;

      @media (hover: hover) {
        // Only apply hover styles on devices that support hover.
        &:is(:hover, :focus) {
          color: var(--color-text);
        }
      }
    }
  }

  // Adjust the layout based on user font size choice.
  @media (max-width: 40rem) {
    // If the viewport isn't wide enough, switch to a column layout.
    flex-direction: column;

    img {
      // Place the image before the title.
      order: -1;
    }

    h1,
    h2,
    p,
    footer {
      // Align any text in the middle.
      text-align: center;
    }
  }
}
