@layer page {
  #hero {
    container-type: inline-size;

    .breadcrumbs {
      margin-block-start: var(--space-l);
      list-style-type: none;

      a {
        color: inherit;
        text-decoration-style: wavy;
        font-size: var(--step-1);
        text-underline-offset: 0.5em;
        font-family: var(--font-heading);
        position: relative;
        z-index: 2;
      }
    }

    h1 {
      inline-size: 100%;
      margin-block-start: 1em;
    }
    #hero__content {
      margin-block-start: var(--space-l);
      display: flex;
      flex-direction: column;
      gap: var(--space-2xl);
    }

    figure {
      will-change: filter;
      @media (width > 60rem) {
        margin-block-end: -5rem;
      }
    }

    img {
      border-radius: 3cqi;
      filter: drop-shadow(-0.75rem 0.75rem 0 hsla(0, 0%, 0%, 0.15));
      inline-size: 100%;
      aspect-ratio: 4.5/3;
      object-fit: cover;
    }
  }
  #post-content {
    container-name: post-content;
    display: grid;
    row-gap: var(--space-xl);
    grid-template-columns: subgrid;
    font-size: var(--step-0);
    margin-block-end: var(--section-padding);

    & > * {
      grid-column: inset-content;
    }

    p {
      text-wrap: pretty;
    }

    blockquote {
      text-wrap: pretty;
      grid-column: content;
      font-size: var(--step-1);
      margin: 0;
      position: relative;
      padding-block: var(--space-xl);
      padding-inline: max(var(--space-lg), 10%);
      container-type: inline-size;
      font-family: var(--font-hand);

      &::before,
      &::after {
        position: absolute;
        font-family: var(--font-heading);
        font-size: 10rem;
        line-height: 1;
      }

      &::before {
        content: "“";
        inset-inline-start: 0;
        inset-block-start: -0.5em;
      }

      &::after {
        content: "”";
        inset-inline-end: 0;
        inset-block-end: -0.75em;
      }

      @container (width < 43.75rem) {
        font-size: calc(var(--step-2) * 0.85);
        grid-column: content;
      }
    }

    figure {
      display: grid;
      grid-template-areas: "img" "caption";
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      position: relative;
      inline-size: 100%;
      row-gap: var(--space-m);
      
      &::before {
        z-index: -1;
        content: "";
        display: block;
        border-image: url("/app/themes/pawfessor/assets/img/svgs/paws_frame.svg")
          20% / 20% / 3rem stretch;
        border-width: 2rem;
        border-style: solid;
        grid-area: img;
        inline-size: 100%;
        block-size: 100%;
        aspect-ratio: 4.5/3;
      }
      
      img {
        aspect-ratio: 4.5/3;
        will-change: filter;
        grid-area: img;
        inline-size: 100%;
        block-size: auto;
        object-fit: cover;
        border-radius: 1.5cqi;
        filter: drop-shadow(-0.75rem 0.75rem 0 hsla(0, 0%, 0%, 0.15));
      }

      figcaption {
        grid-area: caption;
        font-style: italic;
        font-size: var(--step-1);
        text-align: center;
      }
    }

    .outro {
      font-size: var(--step-0);
      text-align: center;
    }
  }
}