@layer pages {
  :root {
    --theme-global-nav-text: var(--color-gray-10);
    --theme-global-nav-deco: var(--color-green-30);
    --theme-header-logo-text: var(--theme-color-primary);
    --theme-header-bg: var(--color-gray-80);
  }

  #hero h1 {
    background: -webkit-linear-gradient(var(--theme-color-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0em 0em 0px var(--theme-color-primary),
      -0.1em 0.1em 0px rgba(0, 0, 0, 0.1);
  }

  .marquees {
    container-type: inline-size;
    grid-column: full;
    /* popout width */
    @media (width > 1600px) {
      grid-column: popout;
    }
  }

  .marquee {
    --gap: 1rem;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);

    @media (width > 1600px) {
      mask-image: linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
      );
    }
  }

  .marquee__content {
    padding: 0;
    list-style: none;
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    min-width: 100%;
    gap: var(--gap);
    animation: scroll 70s linear infinite;

    .marquee:nth-child(odd) & {
      animation-direction: reverse;
    }

    #products-highlight & li {
      font-size: max(4rem, 7cqi);
      font-family: var(--font-heading);
      text-transform: lowercase;
      color: var(--color-fuchsia-50);
      letter-spacing: -0.02em;
      line-height: 1;
      padding-block-end: 0.05em;

      &:nth-child(odd) {
        color: var(--color-purple-50);
      }
    }
  }

  @keyframes scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }

  #products-highlight {
    .container {
      container-type: inline-size;
      display: grid;
      grid-template-areas:
        "bubble"
        "cat"
        "text";
      --rotation: -3.5deg;
      --tail-size: 1.5em;
      padding-block-end: var(--section-padding);
      row-gap: var(--space-m);

      blockquote {
        grid-area: bubble;
        position: relative;
        background-color: var(--theme-color-primary);
        font-family: var(--font-heading);
        text-wrap: balance;
        padding: 1em;
        filter: drop-shadow(0.05em 0.075em 0em var(--color-brown-40));
        text-box: trim-both cap alphabetic;
        border-radius: 0.5em;
        letter-spacing: -0.025em;
        line-height: 1.2;
        font-size: var(--step-4);
        inline-size: fit-content;
        max-width: 10ch;
        rotate: var(--rotation);
        margin-block-start: calc(-1 * 10cqi);
        animation-fill-mode: both;
        animation-name: rotate-in;
        view-timeline: --subjectReveal block;
        animation-timeline: --subjectReveal;

        span {
          text-shadow: -0.05em 0.075em 0em var(--color-green-50);
        }

        svg {
          position: absolute;
          height: var(--tail-size);
          inset-inline-end: 15%;
          inset-block-start: 99%;
        }
      }

      figure {
        grid-area: cat;
        rotate: var(--rotation);
        z-index: 2;
        margin-block-start: calc(-1 * 12cqi);
        max-width: 25rem;
        animation-name: slide-up;
        animation-fill-mode: both;
        view-timeline: --subjectReveal block;
        animation-timeline: --subjectReveal;
        animation-duration: 1ms; /* Firefox requires this to apply the animation */
      }

      .text-content {
        grid-area: text;
        font-size: var(--step-1);
      }

      @media (width > 47.5rem) {
        grid-template-areas:
          "bubble bubble"
          "cat text";
        grid-template-columns: 1fr 1fr;
        column-gap: var(--space-2xl);

        figure {
          max-width: none;
          --translate-y: -10%;
        }

        blockquote {
          margin-inline: auto;
          margin-block-end: var(--tail-size);
          svg {
            inset-inline-end: 70%;
          }
        }
      }
    }
  }

  @keyframes slide-up {
    0% {
      translate: 0 50%;
    }

    50% {
      translate: 0 var(--translate-y, 0);
    }
  }

  #brands {
    text-align: center;
    row-gap: var(--space-xl);
    position: relative;
    --shape-border: 0.2rem solid var(--theme-color-accent);
    --shape-border-radius: 3rem;

    .marquee:hover .marquee__content {
      animation-play-state: paused;
    }

    h2 {
      grid-column: content;
      grid-row: 1/1;
      margin-block-start: var(--space-l);
      padding-inline: var(--space-m);

      &::before {
        content: "";
        display: block;
        position: absolute;
        inset-block: 0;
        inset-inline-start: 50%;
        translate: -50% 0;
        width: var(--inset-content);
        border: var(--shape-border);
        border-radius: var(--shape-border-radius);
        border-color: var(--theme-color-primary);
        rotate: -2deg;
        z-index: -1;
        pointer-events: none;
      }
    }

    .brand-logos {
      grid-row: 2/2;
      list-style-type: none;
      margin-block-end: var(--space-3xl);
      padding-block-end: 0.2rem;
      position: relative;
      z-index: 1;

      grid-column: full;

      @media (width > 1600px) {
        grid-column: popout;
      }

      .marquee__content {
        align-items: start;
      }
    }

    .brand-logo {
      --size: 6rem;
      --padding: calc(var(--size) * 1 / 3);
      display: block;
      background-color: var(--color-white);
      border-radius: 50%;
      filter: drop-shadow(-0.075em 0.1em 0em var(--color-brown-40));
      padding: var(--padding);
      inline-size: calc(var(--size) + var(--padding) * 2);
      
      &:nth-child(odd) {
        margin-block-start: var(--size);
      }
      
      img {
        aspect-ratio: 1;
        inline-size: var(--size);
        block-size: var(--size);
        width: 100%;
        object-fit: contain;
      }
    }

    &::before,
    &::after {
      grid-column: inset-content;
      grid-row: 1 / span 2;
      content: "";
      display: block;
      block-size: 100%;
      inset: 0;
      border: var(--shape-border);
      border-radius: var(--shape-border-radius);
      z-index: -1;
    }

    &::after {
      border-color: var(--color-purple-40);
      rotate: 3deg;
    }
  }

  #testimonials {
    padding-block-start: var(--section-padding);
    text-align: center;
    overflow-x: clip;
    @media (width >= 85rem) {
      &::before,
      &::after {
        grid-column: 1 / span 3;
        grid-row: 1 / span 2;
        content: "";
        display: block;
        inline-size: 15rem;
        aspect-ratio: 229/476;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQ2IiBoZWlnaHQ9IjQzMyIgdmlld0JveD0iMCAwIDI0NiA0MzMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik03Ny4xODk3IDcwLjg5OTdDNzcuMDE4NSA3MC44NjIgNzYuODQxNCA3MC44Mjk1IDc2LjY2NDMgNzAuODAyNUM2OS40NTY1IDcwLjM3OTcgNjMuOTM1NCA3Ni44MTU4IDYxLjg3NCA4My4xNDc1QzU5LjY5NzggODguODIxMiA2MC41MjA5IDk2Ljk1OTUgNjYuNjUwOCA5OS43NzdDNjcuNTQyOSAxMDAuMTczIDY4LjUzMiAxMDAuMzE4IDY5LjUwMjQgMTAwLjI4NEM3Ny44NjA2IDk5LjQ5NTggODMuNDczOSA5MS4xMjYzIDg0LjEzMDEgODMuMjYwNkM4NC45NTE3IDc4LjI3MzYgODIuNDk3MyA3Mi4wNjgzIDc3LjE4OTcgNzAuODk5NEw3Ny4xODk3IDcwLjg5OTdaTTQ3Ljc0MjQgNjQuMzUxNEM0My40MDk2IDYzLjQ1MDYgMzkuMDMzIDY3LjAzNTggMzcuMzkwOSA3MC45ODM2QzM0LjA1MDcgNzguNzg0NiAzNS4zOSA4OS43NiA0My4yNjYxIDk0LjMxNDRDNDQuMDE5OCA5NC42NzI2IDQ0LjgzNyA5NC44ODIzIDQ1LjY2ODEgOTQuOTQ1N0M1MS42MjA5IDk1LjMyOTQgNTUuNTQ5MiA4OS40NzI0IDU2LjUyMTIgODQuMjMwM0M1Ny45NDcgNzcuMzQ5IDU2LjI0MTUgNjguNjA4NCA0OS41ODY0IDY1LjAyNTFDNDguOTc3MyA2NC43MDExIDQ4LjM2MTMgNjQuNDgwNyA0Ny43NDIzIDY0LjM1Mkw0Ny43NDI0IDY0LjM1MTRaTTkwLjQ4ODMgOTguNzExMUM4Mi45MzE2IDk3LjQxNTkgNzYuMDg0OCAxMDMuNjU4IDczLjczNDMgMTEwLjQzMkM3MS41NzggMTE1LjIwOSA3Mi42ODI5IDEyMi41MzEgNzguMzAzNiAxMjQuMjY2Qzg2LjI5NDEgMTI2LjAyOSA5My43MTg2IDExOC43ODUgOTUuNjU1OSAxMTEuNTEyQzk3LjI5MTggMTA2Ljc4NSA5NS44MTE5IDEwMC4yMzcgOTAuNDg4MyA5OC43MTExWk0yNC44NzIyIDg1LjEyMTNDMjEuNzA4IDg0LjM1MzIgMTguMTQ1OCA4NS41MjM4IDE2LjM1NjggODguNTA0OUMxMS41NzgyIDk2LjQ4MDcgMTQuNTc4MSAxMDguNjk3IDIzLjI4NjQgMTEyLjY0M0MyNi45NDUyIDExNC4xODUgMzAuOTc3NSAxMTIuMDQxIDMyLjc0NTIgMTA4Ljc0QzM2LjUwNzYgMTAxLjY3NiAzNC40Mzc1IDkxLjk2OTUgMjguMjc1MSA4Ni45MjQ4QzI3LjI4OTcgODYuMDIzNCAyNi4xMTAxIDg1LjQyMzIgMjQuODcxOSA4NS4xMjI3TDI0Ljg3MjIgODUuMTIxM1pNNTQuNjcwNSAxMDguMzg3QzQ4LjQ1MTYgMTA2Ljk0OCA0MS40MDEzIDEwOC42MjcgMzYuMjc5NCAxMTIuMzgyQzMwLjY1MzcgMTE2Ljg0IDI1LjYwNDcgMTIyLjM3NiAyMi41OTc4IDEyOC45NTdDMTkuNzQzOCAxMzMuNTM0IDIyLjI0MyAxNDAuMTUxIDI3LjU0OTQgMTQxLjQyOEMzMy45MDE2IDE0My4wOTkgNDAuNDIyMyAxMzkuOTkyIDQ2Ljg1NjIgMTQxLjE1MkM1Mi40NDIzIDE0MS41ODkgNTYuNjE2NiAxNDUuNTIzIDYxLjAzNzIgMTQ4LjQ5M0M2NC43NTM1IDE1MS4yMjMgNzAuNjE3MiAxNTEuODggNzMuNzYzNCAxNDcuOTI5Qzc2LjQ3OTcgMTQzLjc4NyA3NS4xNjc0IDEzOC4zODcgNzQuMDg1MyAxMzMuODkyQzcxLjQ4NjkgMTI2LjQgNjguNjcyMSAxMTguNTA2IDYyLjg2MzEgMTEyLjg1MUM2MC41NDU0IDExMC41MzggNTcuNzA3NiAxMDkuMDkgNTQuNjcwNSAxMDguMzg3WiIgZmlsbD0iI0Q3REYyMyIvPgo8cGF0aCBkPSJNMTI2LjE2NCAzNDQuMDk3QzEyNi4wMDggMzQ0LjEzNyAxMjUuODQ4IDM0NC4xODMgMTI1LjY5MSAzNDQuMjMzQzExOS41NzYgMzQ2Ljg0NyAxMTcuNjcgMzU0LjQyMiAxMTguNTc0IDM2MC40ODhDMTE5LjExMiAzNjYuMDU5IDEyMy4xMzUgMzcyLjQyOSAxMjkuMzQ2IDM3Mi4yMzJDMTMwLjI0NCAzNzIuMTkyIDEzMS4xMTkgMzcxLjkwNSAxMzEuOTA1IDM3MS40NzhDMTM4LjQ3IDM2Ny4zOTMgMTM5LjY1NyAzNTguMTg3IDEzNi45NjUgMzUxLjQzNEMxMzUuNTkzIDM0Ni45ODYgMTMxLjAyIDM0Mi44NzkgMTI2LjE2NCAzNDQuMDk3TDEyNi4xNjQgMzQ0LjA5N1pNOTkuMTk5OCAzNTAuODAzQzk1LjI1ODEgMzUxLjg0MSA5My4xMjM5IDM1Ni41OTUgOTMuMzkyOSAzNjAuNTI0QzkzLjg0NTggMzY4LjMyNyA5OS40NjA3IDM3Ni44MjMgMTA3LjgyNSAzNzcuMzQxQzEwOC41OTMgMzc3LjMyNiAxMDkuMzUzIDM3Ny4xNjMgMTEwLjA2NCAzNzYuODc0QzExNS4xMjkgMzc0Ljc0MyAxMTUuOTYgMzY4LjMwMSAxMTQuNjA2IDM2My41OEMxMTIuOTUzIDM1Ny4zMjIgMTA3Ljk1NSAzNTAuODE4IDEwMC45OTcgMzUwLjZDMTAwLjM2MSAzNTAuNTgzIDk5Ljc2MzEgMzUwLjY1NSA5OS4yIDM1MC44MDNMOTkuMTk5OCAzNTAuODAzWk0xNDguNTU3IDM2MS41NTZDMTQxLjc5NSAzNjMuNTk1IDEzOC43MTcgMzcxLjU1NCAxMzkuNTYzIDM3OC4xMDNDMTM5Ljc1IDM4Mi45MjggMTQzLjY3IDM4OC41MDkgMTQ5LjAxNiAzODcuNjI5QzE1Ni4zMjcgMzg1Ljc5OCAxNTkuNDcgMzc2Ljc3NiAxNTguMDc3IDM2OS45ODRDMTU3LjQ4MyAzNjUuNDE2IDE1My41NzIgMzYwLjYyNiAxNDguNTU3IDM2MS41NTZaTTg4Ljg4NDUgMzc3LjMyM0M4NS45NjA1IDM3Ny45OSA4My41MDU0IDM4MC40MTkgODMuMjU1OSAzODMuNjExQzgyLjU5NSAzOTIuMTUgOTAuMDg4NyA0MDAuOTg3IDk4Ljg4ODYgNDAwLjY2QzEwMi41MzggNDAwLjQyOCAxMDQuOTgxIDM5Ny4wMDMgMTA1LjA4MSAzOTMuNTU2QzEwNS4yNzkgMzg2LjE4NiA5OS41ODM3IDM3OS4wMzYgOTIuNDMwNyAzNzcuNDExQzkxLjI0NzkgMzc3LjA3MyA5MC4wMjg5IDM3Ny4wNjMgODguODg0OCAzNzcuMzI0TDg4Ljg4NDUgMzc3LjMyM1pNMTIzLjAwOSAzODQuMjUzQzExNy4yOTIgMzg1LjYyMyAxMTIuMTcgMzg5LjkwNSAxMDkuNDkyIDM5NS4xMDVDMTA2LjY4NiA0MDEuMDkxIDEwNC44IDQwNy43MyAxMDUuMDI2IDQxNC4zOTFDMTA0LjU1NCA0MTkuMzM2IDEwOS4zMzQgNDIzLjc2NCAxMTQuMjMzIDQyMi42MzVDMTIwLjE1NiA0MjEuNDAyIDEyNC4yNTQgNDE2LjE2MSAxMzAuMDM0IDQxNC40NzJDMTM0LjgxOCA0MTIuNTM4IDEzOS44NzYgNDE0LjA2NSAxNDQuNzQgNDE0LjY5NUMxNDguOTI2IDQxNS40MTkgMTU0LjAyOSA0MTMuNTUgMTU0Ljk5OSA0MDlDMTU1LjUzNSA0MDQuNDY5IDE1Mi4yMzQgNDAwLjU1OCAxNDkuNDk1IDM5Ny4yOThDMTQ0LjI3NCAzOTIuMTkgMTM4LjcxIDM4Ni44NCAxMzEuNTk3IDM4NC41NjVDMTI4LjczNiAzODMuNjExIDEyNS44MDEgMzgzLjU4NCAxMjMuMDA5IDM4NC4yNTNaIiBmaWxsPSIjRDdERjIzIi8+CjxwYXRoIGQ9Ik0xMzcuNzI3IDEyLjY4MjJDMTM3LjcyNyAxMi42ODIyIDEyNS40NjggMS40ODc4NSAxMTMuOTg4IDkuNjQ4ODJDMTAyLjI2NiAxNy45Nzg5IDEwMi45MjMgMjcuNzAwMiAxMTMuMTU0IDMzLjExNEwxMjMuMzg1IDM4LjUyNzhMMTEyLjE5NSA4MS4wMzg2QzExMi4xOTUgODEuMDM4NiA5Ni44MzkxIDgwLjM2MDQgOTEuNDgzOSA5MC40MTgyQzg3LjEwNzggOTguNjM2OCA4OC43ODUzIDEwNC44MjIgOTQuOTIzNSAxMDguNjMxQzEwNC43NTggMTE0LjczNCAxMTYuMjczIDExMy4zMTYgMTE3LjYyMSAxMDguMTMxQzEzMC4wNzIgMTI1LjY5MiAxNDYuNzExIDExNy4zNyAxNDUuNDk0IDEwMy41MjlDMTQ0LjQ1OCA5MS43MzUyIDEzMS42NzcgODQuODU1NSAxMzEuNjc3IDg0Ljg1NTVMMTM1LjUgNjkuNTc1M0wxNDIuOTEgMzguNjM4OEMxNDIuOTEgMzguNjM4OCAxNTEuMjUzIDQ0LjgzNTEgMTU4LjQ2NSAzNy4wMzIxQzE2OS4yODIgMjUuMzE3NyAxNDcuNTg2IC04LjU5NzY2IDEzMS43ODEgMjAuOTAwNSIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTEzNy43MjcgMTIuNjgyMkMxMzcuNzI3IDEyLjY4MjIgMTI1LjQ2OCAxLjQ4Nzg1IDExMy45ODggOS42NDg4MkMxMDIuMjY2IDE3Ljk3ODkgMTAyLjkyMyAyNy43MDAyIDExMy4xNTQgMzMuMTE0TDEyMy4zODUgMzguNTI3OEwxMTIuMTk1IDgxLjAzODZDMTEyLjE5NSA4MS4wMzg2IDk2LjgzOTEgODAuMzYwNCA5MS40ODM5IDkwLjQxODJDODcuMTA3OCA5OC42MzY4IDg4Ljc4NTMgMTA0LjgyMiA5NC45MjM1IDEwOC42MzFDMTA0Ljc1OCAxMTQuNzM0IDExNi4yNzMgMTEzLjMxNiAxMTcuNjIxIDEwOC4xMzFDMTMwLjA3MiAxMjUuNjkyIDE0Ni43MTEgMTE3LjM3IDE0NS40OTQgMTAzLjUyOUMxNDQuNDU4IDkxLjczNTIgMTMxLjY3NyA4NC44NTU1IDEzMS42NzcgODQuODU1NUwxMzUuNSA2OS41NzUzTDE0Mi45MSAzOC42Mzg4QzE0Mi45MSAzOC42Mzg4IDE1MS4yNTMgNDQuODM1MSAxNTguNDY1IDM3LjAzMjFDMTY5LjI4MiAyNS4zMTc3IDE0Ny41ODYgLTguNTk3NjYgMTMxLjc4MSAyMC45MDA1IiBzdHJva2U9IiMzMzMzMzMiIHN0cm9rZS13aWR0aD0iMi43NjQ4NyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMTcuNjE5IDEwOC4xMzFDMTE3LjYxOSAxMDguMTMxIDExNC4wOTYgMTAxLjY2NSAxMTYuMjkxIDk0Ljg5NjlaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTE3LjYxOSAxMDguMTMxQzExNy42MTkgMTA4LjEzMSAxMTQuMDk2IDEwMS42NjUgMTE2LjI5MSA5NC44OTY5IiBzdHJva2U9IiMzMzMzMzMiIHN0cm9rZS13aWR0aD0iMi43NjQ4NyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xNjAuOTQzIDIwOS4yNTdDMTYwLjk0MyAyMDkuMjU3IDE0Ny42MzEgMjA3LjI3IDE0My41OTggMjE3Ljk1NEMxMzkuNDc5IDIyOC44NjEgMTQ0LjMxOSAyMzUuMTA1IDE1My42NTEgMjM0LjEyTDE2Mi45ODQgMjMzLjEzNEwxNzQuNjg1IDI2Ni44QzE3NC42ODUgMjY2LjggMTY0LjA0NiAyNzMuMjg5IDE2NC45OTMgMjgyLjQ3OUMxNjUuNzY2IDI4OS45ODggMTY5LjY5MiAyOTMuMzkxIDE3NS41NDYgMjkzLjE3OEMxODQuOTIzIDI5Mi44MzYgMTkyLjAyOSAyODYuNjcyIDE5MC41OTEgMjgyLjU3NEMyMDYuOTEyIDI4OC43NTggMjE0LjM0NCAyNzUuNjMyIDIwNy4yNjQgMjY2Ljg2OUMyMDEuMjMyIDI1OS40MDIgMTg5LjUyIDI2MC41NTUgMTg5LjUyIDI2MC41NTVMMTg1LjE4MSAyNDguNTQ0TDE3Ni4xNzIgMjI0LjM3N0MxNzYuMTcyIDIyNC4zNzcgMTg0LjU4OCAyMjQuNzcyIDE4NS45MTEgMjE2LjI1OUMxODcuODkgMjAzLjQ4NCAxNTcuOTUxIDE5MC40NzkgMTYwLjY2IDIxNy40NzYiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xNjAuOTQzIDIwOS4yNTdDMTYwLjk0MyAyMDkuMjU3IDE0Ny42MzEgMjA3LjI3IDE0My41OTggMjE3Ljk1NEMxMzkuNDc5IDIyOC44NjEgMTQ0LjMxOSAyMzUuMTA1IDE1My42NTEgMjM0LjEyTDE2Mi45ODQgMjMzLjEzNEwxNzQuNjg1IDI2Ni44QzE3NC42ODUgMjY2LjggMTY0LjA0NiAyNzMuMjg5IDE2NC45OTMgMjgyLjQ3OUMxNjUuNzY2IDI4OS45ODggMTY5LjY5MiAyOTMuMzkxIDE3NS41NDYgMjkzLjE3OEMxODQuOTIzIDI5Mi44MzYgMTkyLjAyOSAyODYuNjcyIDE5MC41OTEgMjgyLjU3NEMyMDYuOTEyIDI4OC43NTggMjE0LjM0NCAyNzUuNjMyIDIwNy4yNjQgMjY2Ljg2OUMyMDEuMjMyIDI1OS40MDIgMTg5LjUyIDI2MC41NTUgMTg5LjUyIDI2MC41NTVMMTg1LjE4MSAyNDguNTQ0TDE3Ni4xNzIgMjI0LjM3N0MxNzYuMTcyIDIyNC4zNzcgMTg0LjU4OCAyMjQuNzcyIDE4NS45MTEgMjE2LjI1OUMxODcuODkgMjAzLjQ4NCAxNTcuOTUxIDE5MC40NzkgMTYwLjY2IDIxNy40NzYiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIyLjI0MTY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE5MC41OSAyODIuNTc1QzE5MC41OSAyODIuNTc1IDE4NS4yOTQgMjc5LjgxOCAxODMuNzEgMjc0LjI3MVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xOTAuNTkgMjgyLjU3NUMxOTAuNTkgMjgyLjU3NSAxODUuMjk0IDI3OS44MTggMTgzLjcxIDI3NC4yNzEiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIyLjI0MTY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE5Mi40MTQgNjcuMTk5NEMxOTguMzgxIDYyLjI0OSAyMTAuNjU0IDYzLjI5MjkgMjE0LjY2MSA3OS43NjQxQzIyMS4wNzIgNzAuOTE3MSAyMzQuNDQyIDY2LjA4NjQgMjQxLjc0OCA3Ni42ODYyQzI0OS4wNTQgODcuMjg2IDIzMS44ODQgMTA3LjEzMiAyMDkuMjcgMTIxLjMxOEMxODguMjg5IDk4Ljk5OTcgMTc4LjUyNiA3OC43MjE1IDE5Mi40MTQgNjcuMTk5NFoiIGZpbGw9IiNFMTM3QTYiLz4KPHBhdGggZD0iTTEyMS4yMzMgMzkwLjc4NUMxMjQuODAxIDM4NS43OTMgMTM0LjQwNCAzODQuMTE3IDE0MC43OTIgMzk1LjkxNEMxNDMuOTEzIDM4Ny44NTEgMTUzLjE3MiAzODEuNDU4IDE2MC45IDM4OC4wOTdDMTY4LjYyOCAzOTQuNzM1IDE1OS40OSA0MTMuMzg1IDE0NS4wNDUgNDI4LjgwMUMxMjQuNDg4IDQxNS45NTIgMTEyLjkyOCA0MDIuNDAyIDEyMS4yMzMgMzkwLjc4NVoiIGZpbGw9IiNFMTM3QTYiLz4KPHBhdGggZD0iTTQ3LjkxMDUgMjQwLjg1OEM1My4zMDg0IDIzMi42MDYgNjguNjE1OSAyMjkuMjc4IDc5LjY1NTggMjQ3Ljc5NkM4NC4xMzM0IDIzNC42NDIgOTguNTc0NyAyMjMuNzYzIDExMS40MjQgMjMzLjkwOUMxMjQuMjczIDI0NC4wNTYgMTEwLjgzOSAyNzQuNjA3IDg4LjY2ODUgMzAwLjMxOUM1NC44MDc3IDI4MS4wNTMgMzUuMzQ3MiAyNjAuMDYzIDQ3LjkxMDUgMjQwLjg1OFoiIGZpbGw9IiNFMTM3QTYiLz4KPC9zdmc+Cg==");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% auto;
        margin-inline-start: auto;
        margin-inline-end: var(--space-l);
        filter: drop-shadow(-0.2em 0.5em 0em var(--color-brown-40));
        will-change: filter;
      }

      &::after {
        grid-column: 5 / span 3;
        transform: rotateY(180deg);
        margin-inline-end: auto;
        margin-inline-start: var(--space-l);
      }
    }

    .more {
      inline-size: fit-content;
      margin-inline: auto;
      margin-block-start: var(--space-xl);
    }

    h2 {
      margin-block-end: 1.5em;
      grid-row: 1;
    }

    h3 {
      font-family: var(--font-hand);
    }

    .testimonial-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
      gap: var(--space-m);
      padding: 1rem;
      overflow-x: visible;
    }

    .testimonial {
      font-size: var(--step--1);
      color: var(--color-purple-90);
      text-align: start;
      display: flex;
      flex-direction: column;
      gap: var(--space-s);
      background-color: var(--color-white);
      padding: var(--space-m);
      border: 0.2rem solid var(--theme-color-text-dark);
      border-radius: 1.5rem;
      filter: drop-shadow(-0.35em 0.5em 0em var(--color-brown-40));
      rotate: var(--rotation);
      will-change: filter;
    }

    #testimonial-grid__wrap {
      grid-row: 2;
    }
  }

  #blog-teaser {
    display: grid;
    row-gap: var(--space-m);
    column-gap: var(--space-xl);
    padding-block: var(--section-padding);
    grid-template-areas:
      "title"
      "img"
      "posts"
      "text"
      "btn";
    align-items: start;

    @media (width >= 61.25rem) {
      grid-template-columns: 0.85fr 1fr;
      grid-template-areas:
        "title ."
        "img posts"
        "img text"
        "img btn";
    }

    h2 {
      text-align: center;
      margin-inline: auto;
      grid-area: title;

      @media (width >= 61.25rem) {
        --crossout-offset: 2ch;
        text-align: start;
        margin-inline-start: var(--crossout-offset);
        rotate: -3deg;
      }
    }

    .crossout {
      display: grid;
      margin-block-end: 0.25em;
      position: relative;
      place-items: center;

      @media (width >= 61.25rem) {
        translate: calc(-1 * var(--crossout-offset)) 0;
      }

      & > * {
        grid-area: 1/1;
      }

      &::before,
      &::after {
        content: "";
        display: block;
        position: absolute;
        width: 80%;
        height: 0.2rem;
        background-color: var(--theme-color-accent);
      }

      &::before {
        rotate: -15deg;
      }
      &::after {
        rotate: 5deg;
      }
    }

    figure {
      grid-area: img;
    }

    ul {
      grid-area: posts;
      display: flex;
      flex-direction: column;
      list-style-type: none;
      padding-inline: 0;
      gap: 1em;
      font-weight: 700;
      font-size: var(--step-2);
      line-height: 1.1;

      li {
        text-wrap: balance;
        a {
          color: inherit;
          text-decoration: none;

          &:hover {
            text-decoration: underline;
            text-decoration-style: wavy;
            text-decoration-color: var(--theme-color-accent);
          }
        }
      }

      @media (width >= 61.25rem) {
        li:nth-child(1) {
          rotate: -4deg;
        }
        li:nth-child(2) {
          rotate: -2deg;
        }
      }
    }

    .blog-teaser__text {
      grid-area: text;
      font-weight: 600;
    }

    .btn {
      grid-area: btn;
      inline-size: fit-content;
    }
  }
}
/* Pages layer end */