@layer block {
  /* stylelint-disable comment-empty-line-before */
  /* stylelint-disable no-descending-specificity */
  /* images mobile/desktop */
  .grid-overlay img {
    width: 100%;
    display: block;
  }

  .grid-overlay:not(.row-link-wrap) div > div > a + a {
    display: none;
  }

  @media (max-width: 599px) {
    .grid-overlay ul {
      list-style: none;
      display: flex;
      overflow: auto;
      width: 100%;
    }

    .grid-overlay ul,
    .grid-overlay ul img {
      min-height: 54.8vh;
    }

    .grid-overlay ul li {
      flex: 1 0 100%;
    }

    .grid-overlay.overflow-scroll ul + div.scroll-controls + div,
    .grid-overlay.overflow-scroll:nth-last-child(2) {
      display: none;
    }

    .grid-overlay.overflow-scroll img {
      margin-bottom: 5rem;
    }

    .grid-overlay.overflow-scroll > ul img {
      margin-bottom: 0;
    }
  }

  @media (min-width: 600px) {
    .grid-overlay:not(.row-link-wrap) div > div > a + a {
      display: block;
      width: 100%;
    }

    .grid-overlay:not(.row-link-wrap, .overflow-scroll)
      div
      > div
      > a:first-of-type {
      display: none;
    }

    .grid-overlay.overflow-scroll ul,
    .grid-overlay.overflow-scroll div.scroll-controls {
      display: none;
    }

    .grid-overlay.overflow-scroll ul + div + div {
      min-height: clamp(35vh, 48vh, 44vw);
      width: 100%;
      height: auto;
    }

    .grid-overlay.overflow-scroll > div,
    .grid-overlay.overflow-scroll > div + div div a,
    .grid-overlay.overflow-scroll > div + div div a picture {
      display: block;
      height: 100%;
      width: 100%;
      box-sizing: border-box;
    }

    .grid-overlay.overflow-scroll ul + div + div div a picture img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }

  /* text styles */
  .grid-overlay.text-center {
    text-align: center;
  }

  .grid-overlay.text-left {
    text-align: left;
  }

  .grid-overlay:not(.row-link-wrap) > div:last-of-type {
    padding: 2rem 2rem 1rem;
  }

  .grid-overlay.hero h1 {
    margin: 0 0 1rem;
    font: var(--font-pragmatica-extd-bold);
    line-height: 0.9;
    font-size: var(--hpfs-h1);
  }

  .grid-overlay.hero h1 em {
    font: var(--font-scotch-display-bold);
    font-size: inherit;
    line-height: 0.9;
  }

  main .section > div .grid-overlay p {
    font: var(--font-pragmatica-extd-light);
    font-size: var(--hpfs-p);
    max-width: 50ch;
    margin-inline: auto;
  }

  .grid-overlay p strong {
    font: var(--font-pragmatica-extd-bold);
    font-size: inherit;
  }

  .grid-overlay p sup {
    font-size: 60%;
  }

  .grid-overlay h2,
  .grid-overlay h3 {
    font: var(--font-pragmatica-extd-bold);
    line-height: 0.9;
    font-size: var(--hpfs-h2);
    margin: 0.7em 0 0.3em;
  }

  .grid-overlay h2 em,
  .grid-overlay h3 em {
    font: var(--font-scotch-display-bold);
    line-height: 0.8;
    font-size: inherit;
  }

  /* button */
  .grid-overlay:not(.row-link-wrap) > div:last-of-type > div:last-of-type {
    display: flex;
    justify-content: center;
  }

  .grid-overlay.btns-stack:not(.row-link-wrap)
    > div:last-of-type
    > div:last-of-type {
    flex-flow: column;
    margin-inline: auto;
    width: fit-content;
  }

  .grid-overlay.btns-stack:not(.row-link-wrap)
    > div:last-of-type
    > div:last-of-type
    > a {
    width: 100%;
  }

  @media (max-width: 599px) {
    .grid-overlay.btns-stack-sm:not(.row-link-wrap)
      > div:last-of-type
      > div:last-of-type {
      flex-flow: column;
      margin-inline: auto;
      width: fit-content;
    }

    .grid-overlay.btns-stack:not(.row-link-wrap)
      > div:last-of-type
      > div:last-of-type
      > a {
      width: 100%;
    }
  }

  .grid-overlay:not(.row-link-wrap) > div:last-of-type > div:last-of-type a {
    background: var(--clr-white);
    color: var(--clr-brand-black);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: 4.5rem;
    padding-inline: 1.8rem;
    min-width: 17.5rem;
    white-space: nowrap;
    font: var(--font-pragmatica-extd-medium);
    font-size: var(--button-font-size);
    text-decoration: none;
    margin: 1rem;
    border: 1px solid var(--clr-brand-black);
  }

  .grid-overlay:not(.row-link-wrap)
    > div:last-of-type
    > div:last-of-type
    a:hover,
  .grid-overlay:not(.row-link-wrap)
    > div:last-of-type
    > div:last-of-type
    a:focus-visible {
    text-decoration: underline;
  }

  .grid-overlay.btn-no-border > div:last-of-type > div:last-of-type a {
    border-color: var(--clr-white);
  }

  .grid-overlay.text-left > div:last-of-type > div:last-of-type {
    justify-content: start;
  }

  .grid-overlay.text-left > div:last-of-type > div:last-of-type a {
    margin-left: 0;
  }

  /* .grid-overlay */
  .grid-overlay:not(.overlay-lg-only) {
    display: grid;
  }

  .grid-overlay:not(.row-link-wrap) > * {
    grid-area: 1/1;
  }

  .grid-overlay:not(.row-link-wrap) > div:first-child,
  .grid-overlay:not(.row-link-wrap) > div:first-child > div,
  .grid-overlay:not(.row-link-wrap) > div:first-child a,
  .grid-overlay:not(.row-link-wrap) > div:first-child picture,
  .grid-overlay:not(.row-link-wrap) > div:first-child img {
    height: 100%;
    object-fit: cover;
  }

  @media (min-width: 600px) {
    .grid-overlay:not(.row-link-wrap, .overflow-scroll).overlay-lg-only {
      display: grid;
      align-items: center;
    }

    .grid-overlay:not(.row-link-wrap, .overflow-scroll) > div:last-of-type {
      margin: 3vw 5vw;
      padding: 0;
      box-sizing: border-box;
      width: clamp(30ch, 40%, 50ch);
      align-self: center;
      justify-self: center;
    }

    /* left side text */
    .grid-overlay.text-left-col-lg > div:last-of-type {
      justify-self: start;
    }

    .grid-overlay.text-top-left-col-lg > div:last-of-type {
      align-self: start;
      justify-self: start;
    }

    /* right side text */
    .grid-overlay.text-right-col-lg > div:last-of-type {
      justify-self: end;
    }

    .grid-overlay.text-top-right-col-lg > div:last-of-type {
      align-self: start;
      justify-self: end;
    }

    .grid-overlay.text-center-lg > div:last-of-type > div {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .grid-overlay-container.full > div {
      max-width: 100%;
    }

    .grid-overlay.hero h1 {
      white-space: nowrap;
      margin: 0 0 2rem;
    }
  }

  @media (min-width: 840px) {
    .grid-overlay.overflow-scroll.overlay-lg-only {
      display: grid;
      align-items: center;
      width: 100%;
    }
  }

  @media (min-width: 1024px) {
    .grid-overlay:not(.row-link-wrap, .overflow-scroll) > div:last-of-type {
      margin: 5vw 7vw;
    }

    .grid-overlay.text-center-col-xlg > div:last-of-type {
      align-self: center;
      justify-self: center;
    }

    .grid-overlay.text-right-col-xlg > div:last-of-type {
      align-self: center;
      justify-self: flex-end;
    }

    .grid-overlay.text-top-right-col-xlg > div:last-of-type {
      align-self: flex-start;
      justify-self: flex-end;
      width: 50%;
    }
  }

  @media (min-width: 1920px) {
    .grid-overlay:not(.row-link-wrap, .overflow-scroll) > div:last-of-type {
      width: clamp(30ch, 45%, 60ch);
    }
  }

  /* with row-link-wrap */
  .grid-overlay.row-link-wrap div > div > a:first-of-type {
    display: grid;
    align-items: center;
    justify-items: center;
  }

  .grid-overlay.row-link-wrap > div:last-of-type > div:last-of-type a {
    border: none;
  }

  .grid-overlay.row-link-wrap > div:last-of-type > div:last-of-type a > * {
    grid-area: 1/1;
  }

  .grid-overlay.row-link-wrap.text-right-col
    > div:last-of-type
    > div:last-of-type
    a
    > div:last-of-type {
    width: fit-content;
    justify-self: end;
    display: flex;
    flex-flow: column;
    align-items: center;
  }

  .grid-overlay.row-link-wrap.text-left-col
    > div:last-of-type
    > div:last-of-type
    a
    > div:last-of-type {
    width: fit-content;
    justify-self: start;
    display: flex;
    flex-flow: column;
    align-items: center;
  }
}