.text-content-block {
  .h1:first-of-type,
  h1:first-of-type {
    font-size: calc(var(--fs-2xl) * 0.8);
    margin-block-end: var(--gap);
  }
}

/* ==== CONTENT HERO SECTION ==== */

.content-hero,
.article-hero {
  display: grid;
  grid-template-areas:
    "top"
    "middle"
    "bottom";
  place-items: stretch;
  width: 100%;
  position: relative;
  padding-block-end: calc(var(--section-margins) / 4);
  margin-block-end: calc(var(--section-margins) / 4) !important;
  margin-block-end: 0 !important;

  &:has(picture) {
    min-height: calc(100svh - var(--nav-height));
  }

  .h1,
  h1 {
    font-size: calc(var(--fs-2xl) * 0.8);
  }

  .lead {
    margin-block-start: 0.7rem;
  }

  .text-content {
    grid-area: bottom / bottom;
    width: 100%;
    max-width: 100vw;
    display: flex;
    row-gap: 0;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    height: fit-content;
    min-height: fit-content;
    padding-inline: calc(var(--bs-gutter-x) / 2 + var(--container-margins));
    padding-block: calc(var(--section-margins) / 2);
    align-self: end; /* Stick to the bottom */
  }

  picture {
    grid-area: top / top / middle / middle;
    width: 100%;
    height: 100%;
    max-height: var(--max-video-h);
    overflow: hidden;
  }

  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: 50% 52%;
    /* overflow: visible; */
  }

  @media (width <= 992px) {
    &:has(picture) {
      min-height: fit-content;
    }

    picture {
      grid-area: top / top / middle / middle;
      aspect-ratio: 16 / 9;
    }

    .text-content {
      grid-area: bottom / bottom;
    }
  }
}

.article-hero {
  picture {
    padding-inline: calc(var(--bs-gutter-x) / 2 + var(--container-margins));
    padding-block-end: calc(var(--section-margins) / 2);
    grid-area: middle / middle / bottom / bottom;
  }

  img {
    overflow: hidden;
  }

  .text-content {
    align-self: start; /* Stick to the top */
    grid-area: top / top;
    background: linear-gradient(
      180deg,
      var(--bs-secondary-bg) 40%,
      color-mix(in srgb, var(--bs-secondary-bg), transparent 10%) 60%,
      color-mix(in srgb, var(--bs-secondary-bg), transparent 65%) 99.3%,
      var(--bs-secondary-bg) 105%
    );
    box-shadow: none;
  }

  @media (width <= 992px) {
    &:has(picture) {
      min-height: fit-content;
    }

    picture {
      grid-area: middle / middle / bottom / bottom;
      padding-block-end: 0;
      aspect-ratio: 16 / 9;
    }

    .text-content {
      grid-area: top / top;
    }
  }
}

.blog_content {
  padding-block: 0 !important;
  .markdown-content,
  div:first-of-type {
    max-width: 70ch !important;
    align-content: center;
    margin-inline: auto;
  }

  iframe {
    aspect-ratio: 16 / 9;
  }
}

/* ==== MARKDOWN CONTENT ==== */

.text-content-block {
  max-width: min(max(90ch, var(--content-width)), 90vw);
  place-self: center;
  align-self: center;
  margin-inline: auto;
}

.markdown-content {
  max-width: min(max(90ch, var(--content-width)), 90vw);
  li {
    max-width: max(85ch, 58rem);
    font-variation-settings: "wght" calc(var(--font-weight) - 200);
    margin-block-end: 0.5rem;
    text-wrap: pretty;
  }

  ul {
    max-width: max(85ch, 58rem);
    padding-left: 2rem;
    text-wrap: pretty;
  }

  blockquote {
    font-size: var(--fs-md);
    max-width: max(64ch, 60rem);
    font-variation-settings: "wght" calc(var(--font-weight) - 125);
    font-style: normal;
  }

  .table {
    width: min(75ch, 100%);
  }

  td {
    align-content: start;
  }

  th.table-cell {
    font-size: var(--fs-md);
  }

  tr.table-row,
  td.table-cell {
    min-width: 20ch;
  }

  li::marker {
    font-size: 1em;
    color: var(--bs-primary);
    color: color-mix(in srgb, currentColor 100%, transparent 70%);
    white-space: preserve;
  }
}

section {
  /* ==== Extend bg's to full width ==== */

  &.bg-dark {
    padding-block: calc(var(--section-margins) / 1.25);
    color: var(--bs-secondary-bg);
    box-shadow: 0 0 0 100vmax rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
    clip-path: inset(-0.001vmax -100vmax);
    .btn-outline-dark {
      --bs-btn-color: var(--bs-secondary-bg);
      --bs-btn-border-color: var(--bs-secondary-bg);
    }
    .wide {
      color: color-mix(in srgb, currentColor, #000 30%);
    }
  }

  &.bg-dark-subtle {
    background-color: violet;
    padding-block: calc(var(--section-margins) / 1.25);
    clip-path: inset(-0.001vmax -100vmax);
    box-shadow: 0 0 0 100vmax
      rgba(var(--bs-dark-rgb), calc(var(--bs-bg-opacity) / 4)) !important;
  }

  &.bg-primary {
    padding-block: calc(var(--section-margins) / 1.25);
    clip-path: inset(-0.001vmax -100vmax);
    box-shadow: 0 0 0 100vmax rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
    .btn-primary {
      --bs-btn-border-color: var(--bs-secondary-bg);
      --bs-btn-bg: var(--bs-secondary-bg);
    }
  }

  &.bg-secondary {
    padding-block: calc(var(--section-margins) / 1.25);
    color: var(--bs-secondary-bg);
    clip-path: inset(-0.001vmax -100vmax);
    box-shadow: 0 0 0 100vmax
      rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
    .btn-outline-dark {
      --bs-btn-color: var(--bs-secondary-bg);
      --bs-btn-border-color: var(--bs-secondary-bg);
    }
  }

  &.bg-light {
    padding-block: calc(var(--section-margins) / 1.25);
    clip-path: inset(-0.001vmax -100vmax);
    box-shadow: 0 0 0 100vmax rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
  }

  .header-link {
    transition: opacity var(--speed) var(--ease-in) calc(var(--speed) * 2);
    max-width: var(--content-width);

    &:hover {
      a {
        display: inline-block;
        opacity: 0.75;
        visibility: visible;
        transition-delay: calc(var(--speed) * 4);
      }
    }
    a {
      min-width: 1.25ch;
      display: inline-block;
      text-decoration: none;
      padding-inline-end: 0.25ch;
      margin-inline-start: -1.35ch;
      transition-behavior: allow-discrete;
      opacity: 0;
      transition-property: opacity, visibility, display;
      transition-duration: var(--speed);
      transition-timing-function: var(--ease-in);
      transition-delay: calc(var(--speed) * 1.5);
    }
  }

  .main-content {
    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, 12rem), 1fr) minmax(min(100%, 12rem), 1fr)
    );
    gap: calc(var(--gap) * 0.75) calc(var(--gap) * 1.25);
    max-width: var(--content-width) !important;
    margin-inline: auto;
    &:has(.image-content):not(:has(.text-content)) {
      padding-block: calc(var(--gap) / 1);
      & > div {
        align-content: center;
      }
    }

    @media (width <= 992px) {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
      &:has(.text-content) {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
      }
      &:has(.image-content):not(:has(.text-content)) {
        display: flex;
        flex-direction: row;

        gap: calc(var(--gap) * 1) calc(var(--gap) * 2);
        flex-wrap: wrap;
        padding-block: calc(var(--gap) / 2);
        & > div {
          flex: 1 0 12rem;
          align-content: center;
          justify-content: center;
        }
      }
    }

    @media (width <= 992px) {
      &:has(.image-content) {
        & > div {
          display: flex;
          flex-direction: column;
          .image-content {
            order: 99;
          }
        }
      }
    }

    &:has(.width-small) {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      > div {
        flex: 1 1 16rem;
        max-width: 100%;
        box-sizing: border-box;
      }
      > div:not(.width-small) {
        flex: 1 1 0;
        /* Only needed for flex */
        min-width: 16rem;
      }
      .width-small {
        --col-width: calc(max(min(25vw, 32rem), 18rem) - var(--gap));
        flex: 0 0 var(--col-width);
        max-width: var(--col-width);
      }
    }

    &:has(.width-half) {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      text-align: center;
      place-items: center;
      place-content: center;
      place-self: center;
      flex-direction: column;
      > div,
      .text-content,
      .markdown-content {
        max-width: 100%;
        box-sizing: border-box;
        place-items: center;
        place-content: center;
        place-self: center;
        flex-direction: column;
        text-wrap: balance;
        p,
        .p,
        .p1,
        .p2,
        .p3,
        .p4,
        td,
        ol {
          text-wrap: balance !important;
        }
      }
    }

    &:has(.width-wide) {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      > div {
        flex: 1 1 16rem;
        max-width: 100%;
        box-sizing: border-box;
      }
      > div:not(.width-wide) {
        flex: 1 1 0;
        min-width: 16rem;
      }
      .width-wide {
        --col-width: calc(100% - (max(min(25vw, 32rem), 21rem) - var(--gap)));
        flex: 0 0 var(--col-width);
        max-width: var(--col-width);
      }
    }

    &:has(.width-small),
    &:has(.width-half),
    &:has(.width-wide) {
      @media (width <= 768px) {
        .width-small,
        .width-half,
        .width-wide {
          --col-width: 100%;
          flex: 0 0 var(--col-width);
          max-width: var(--col-width);
        }
      }
    }

    .image-content {
      border-radius: calc(var(--radius) / 1.25);
      overflow: hidden;
    }

    .picture {
      border-radius: calc(var(--radius) / 1.25);
      overflow: hidden;

      max-width: 100%;
      max-height: var(--max-video-h);
      img {
        overflow-clip-margin: unset;
      }
    }

    .picture.top {
      margin-block-end: var(--gap);
    }

    .picture.bottom {
      margin-block-start: var(--gap);
    }

    .aspect-1_1 {
      aspect-ratio: 1 / 1;
      & > * {
        object-fit: cover;
        aspect-ratio: 1 / 1;
      }
    }
    .aspect-16_9 {
      aspect-ratio: 16 / 9;
      & > * {
        object-fit: cover;
        aspect-ratio: 16 / 9;
      }
    }
    .aspect-9_16 {
      aspect-ratio: 9 / 16;
      & > * {
        object-fit: cover;
        aspect-ratio: 9 / 16;
      }
    }
    .aspect-2_1 {
      aspect-ratio: 2 / 1;
      & > * {
        object-fit: cover;
        aspect-ratio: 2 / 1;
      }
    }
    .aspect-1_2 {
      aspect-ratio: 1 / 2;
      & > * {
        object-fit: cover;
        aspect-ratio: 1 / 2;
      }
    }

    & > div {
      padding-block: 0px !important;
      padding-inline: 0px !important;
    }

    & > div:has(.left),
    div:has(.right) {
      display: flex;
      gap: calc(var(--gap) / 1);
      justify-content: center;
      align-content: flex-start;
      @media (width <= 992px) {
        flex-wrap: wrap;
      }
      & > .text-content,
      .image-content {
        width: 50%;
        max-width: 50%;
        min-height: fit-content;
        @media (width <= 992px) {
          width: 100%;
          max-width: 100%;
        }
      }
    }
  }
}

.hero .text-content {
  margin-inline: auto !important;
  place-self: center !important;
}

.hero {
  blockquote p {
    text-wrap: balance !important;
  }
}

.text-content,
.link-list-jumbo {
  /* ==== Limit content width ==== */
  max-width: var(--content-width) !important;
  .btn-primary {
    display: block;
    max-width: fit-content;
  }
}

.main-content {
  p,
  li,
  blockquote {
    a:not(:hover) {
      --bs-link-color-rgb: var(--bs-body-color);
    }
  }

  .text-content:not(.wide) {
    p strong,
    b,
    strong {
      font-variation-settings: "wght" calc(var(--font-weight) + 125);
    }
    h1,
    .h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6,
    .display-1,
    .display-2,
    .display-3,
    .display-4,
    .display-5,
    .display-6 {
      margin-block-end: calc(var(--gap) / 1.5);
      font-variation-settings: "slnt" 0, "wght" calc(var(--font-weight) + 150);
      &.wide {
        font-variation-settings: "wdth" 150, "slnt" 0,
          "wght" calc(var(--font-weight) + 275), "XTRA" 600, "opsz" 8;
      }
      & i,
      & em {
        font-variation-settings: "slnt" 0, "wght" calc(var(--font-weight) - 100);
      }
    }
  }
}

.action-links {
  display: flex;
  flex-wrap: wrap;
  .btn-primary {
    display: revert;
  }
}