.hnhh__container {
  container-name: hnhh__container;
  container-type: inline-size;
}

.hnhh {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "image"
    "text";

  @container hnhh__container (min-width: 640px) {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "text image";
  }
}

.hnhh__img__container {
  grid-area: image;
}

img.hnhh__img {
  height: 100%;
}

.hnhh__text__container {
  grid-area: text;

  &:has(.hnhh__divider__container) {
    position: relative;
    overflow: hidden;
  }
}

.hnhh__text {
  --padding-cqw: 8.66666cqw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: var(--spacing-400, 32px) round(var(--padding-cqw), 1px);
  gap: var(--spacing-300, 24px);
  text-wrap: pretty;

  @container hnhh__container (min-width: 640px) {
    --padding-cqw: 4.33333cqw;
  }

  @container hnhh__container (min-width: 1024px) {
    --padding-cqw: 5.33333cqw;
  }

  .hyperlink {
    display: inline;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;

    &:hover {
      text-decoration-thickness: 2px !important;
    }
  }
}

.hnhh__divider__container {
  position: absolute;
  top: -1px;
  width: 100%;
  height: unset;
  font-size: 0;

  @container hnhh__container (min-width: 640px) {
    top: 0;
    right: -0.3cqw;
    bottom: 0;
    width: unset;
    height: 100%;

    @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
      right: -0.1cqw;
    }
  }
}

.hnhh__divider--mobile {
  width: 100%;
  height: auto;
  shape-rendering: crispedges;

  @container hnhh__container (min-width: 640px) {
    display: none;
  }
}

.hnhh__divider--desktop {
  width: auto;
  height: 100%;
  shape-rendering: crispedges;

  @container hnhh__container (max-width: 639px) {
    display: none;
  }
}