Chalarangelo/30-seconds-of-code

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

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

  // 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 {
      // Align any text in the middle.
      text-align: center;
    }
  }
}