.rich-thumbs-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--gap-200);
  padding-bottom: var(--gap-200);
}

#rich-thumbs-insert .more {
  display: var(--rich-thumbs-more);
}

.rich-thumb {
  display: var(--rich-thumb-display);
  border-radius: var(--gap-200);
  position: relative;
  overflow: hidden;

  a {
    flex: 1;
    padding: var(--gap-150);
    padding-top: var(--gap-125);

    display: grid;
    grid-template-columns: 1fr 1fr;

    color: var(--fg);
  }
  img {
    max-height: 18em;
    max-width: 18em;
  }
  svg {
    max-height: 18em;
    max-width: 18em;
  }
  .info-text {
    display: flex;
    flex-direction: column;
    gap: var(--gap-75);
  }
  .info {
    display: flex;
    flex-direction: column;
    gap: var(--gap-200);
    max-width: 40em;
  }
  .title {
    font-size: 1.75em;
    font-variation-settings: "wght" calc(500 + var(--mod-weight)),
      "wdth" calc(var(--vwidth) + var(--mod-width));
    width: fit-content;
    display: flex;
    align-items: center;
    gap: var(--gap-50);
  }
  .title .eyedropper img {
    height: 1em;
    transform: scale(2);
  }
  .description {
    font-size: 1em;
    text-wrap: pretty;
    max-width: 90%;
    width: fit-content;
  }
  .icon-font {
    font-size: 1.25em;
  }

  .image-blocks {
    display: flex;
    display: none;
    align-items: center;
    gap: var(--gap-200);

    .image-block {
      background-color: color-mix(in srgb, var(--block-bg) 15%, transparent);
      width: 5em;
      height: 5em;
      border-radius: var(--gap-50);
      backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      transition: background-color 150ms ease-out;

      img {
        width: 80%;
        height: 80%;
      }
      .tooltip {
        position: absolute;
        bottom: 110%;
        left: 50%;
        letter-spacing: 0.025em;
        transform: translateX(-50%);
        background: rgb(47, 47, 47);
        backdrop-filter: blur(10px);
        color: #fff;
        color: var(--textcolor);
        background-color: var(--backgroundcolor);
        padding: var(--gap-50);
        border-radius: var(--gap-50);
        max-width: 600px;
        min-width: 5.5em;
        white-space: normal;
        text-align: center;
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;
        z-index: 10;
        word-wrap: pretty;
        /* for hover functionality */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease-out;

        filter: drop-shadow(0px 0px 0.5rem rgba(0, 0, 0, 0.2));

        &::after {
          content: "";
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translateX(-50%);
          border: 6px solid transparent;
          border-top-color: var(--backgroundcolor);
        }
      }
    }
    .image-block:hover {
      background-color: color-mix(in srgb, var(--block-bg) 25%, transparent);
    }
    .image-block:hover .tooltip,
    .image-block:focus-visible .tooltip,
    .image-block.show-tooltip .tooltip {
      opacity: 1;
      pointer-events: auto;
    }
  }

  .hero-image {
    padding: var(--gap) var(--gap-200);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease-out;

    img {
      height: inherit;
    }
    svg {
      flex: 1;
    }
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-25) var(--gap-50);
    margin-bottom: calc(var(--gap-75) * -1);
    margin-left: calc(var(--gap-50) * -1);
    align-self: end;
    position: absolute;
    bottom: calc(var(--gap-150) * 1.1);
    left: var(--gap-150);
    font-size: 0.8em;
  }
  .tag {
    display: flex;
    align-items: center;
    gap: var(--gap-50);
    letter-spacing: 0.025em;
    text-wrap: nowrap;
    padding: 0 var(--gap-50);
    border-radius: var(--gap-25);
    padding: var(--gap-50) var(--gap-50);
    letter-spacing: 0.03em;
  }
  .tag .icon-font {
    font-variation-settings: "wght" calc(250 + var(--mod-weight)),
      "wdth" calc(var(--vwidth) + var(--mod-width));
  }
}

.rich-thumb:hover .hero-image {
  transform: scale(0.95);
}
.rich-thumb a:focus-visible .hero-image {
  transform: scale(0.95);
}

/* background image  */
.rich-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 0;
}

.rich-thumb::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -20px;
  right: -20px;
  top: 0; /* stretch full height */
  background-image: var(--bg-img);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain; /* or auto if you want exact image dimensions */
  z-index: 1;
  transition: transform 0.2s ease-out;
  pointer-events: none;
  transform: scale(1.01);
}
.rich-thumb:hover::after {
  transform: scale(1);
}
.rich-thumb:has(a:focus-visible)::after {
  transform: scale(1);
}
@media all and (max-width: 700px) {
  .rich-thumb::after {
    transform: scale(1.75);
    bottom: 10.8em;
    bottom: 8.2em;
  }
  .rich-thumb:hover::after {
    transform: scale(1.72);
  }
  .rich-thumb:has(a:focus-visible)::after {
    transform: scale(1.72);
  }
}
@media all and (max-width: 550px) {
  .rich-thumb::after {
    transform: scale(3);
    bottom: 18.7em;
    bottom: 15em;
  }
  .rich-thumb:hover::after {
    transform: scale(2.97);
  }
  .rich-thumb:has(a:focus-visible)::after {
    transform: scale(2.97);
  }
}

.rich-thumb > * {
  position: relative;
  z-index: 2;
}

.image-block.show-tooltip .tooltip {
  opacity: 1;
  pointer-events: auto;
}
.rich-thumbs-spacer {
  padding-top: 6em;
}
.frontpage .rich-thumbs-spacer {
  display: none;
}
#rich-thumbs-insert .mjrsectiontitle {
  padding-top: 0;
}

@media all and (max-width: 700px) {
  .rich-thumb {
    a {
      grid-template-columns: 1fr;
    }
    .hero-image {
      padding: 0;
      padding-top: var(--gap-300);
      padding-bottom: calc(var(--gap-400) + var(--gap));
    }
  }
}
@media all and (max-width: 500px) {
  .rich-thumb {
    .title {
      font-size: 1.5em;
    }
    .description {
      font-size: 1em;
    }
    .image-blocks {
      gap: var(--gap-150);
    }
    .image-block {
      /* font-size: 0.75em; */
    }
  }
}
@media all and (max-width: 350px) {
  .rich-thumb {
    img {
      max-height: 15em;
      max-width: 15em;
    }
    svg {
      max-height: 15em;
      max-width: 15em;
    }
    .image-blocks {
      font-size: 0.75em;
      flex-wrap: wrap;
    }
    .title {
      font-size: 1.25em;
    }
  }
  .rich-thumb::after {
    bottom: 13.8em;
  }
}

/* make hover tooltips have different behavior on smartphones  */
html.mouse .rich-thumbs .image-block:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
}

html.touch .rich-thumbs .image-block .tooltip {
  display: none; /* handled manually in JS if you want */
}

.high-contrast {
  .title {
    color: var(--textcolor);
    background-color: var(--backgroundcolor);
    padding-left: var(--gap-25);
    padding-right: var(--gap-25);
  }
  .description {
    color: var(--textcolor);
    background-color: var(--backgroundcolor);
    padding-left: var(--gap-25);
    padding-right: var(--gap-25);
  }
  .tags {
  }
  .tag {
    color: var(--textcolor);
    background-color: var(--backgroundcolor);
    border-radius: unset;
  }
  .behance {
    .tag {
      color: var(--textcolor);
    }
  }
}

/* .behance {
  .tag {
    background-color: #c3c1c1;
  }
} */
.behance {
  .tag {
    color: #c3c1c1;
  }
}