/* The handwritten names are content, not decoration. */
.variant-a .note {
  position: relative;
  right: auto;
  bottom: auto;
  width: fit-content;
  max-width: 100%;
  margin: 24px 0 0 auto;
  transform: rotate(3deg);
}

@media (max-width: 760px) {
  .variant-a .hero-visual {
    margin-inline: 0;
    padding-bottom: 0;
  }

  .variant-a .names {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    padding-inline: 6px;
    font-size: clamp(1.35rem, 6vw, 1.75rem);
  }

  .variant-a .note {
    position: relative;
    right: auto;
    bottom: auto;
    display: block;
    width: fit-content;
    max-width: calc(100% - 12px);
    margin: 16px 0 0 auto;
    padding: 18px 50px 18px 20px;
    transform: rotate(2deg);
    font-size: 1.08rem;
  }

  .variant-a .note span {
    right: 14px;
    bottom: 11px;
    font-size: 2rem;
  }

  .variant-a .visual-caption {
    margin: 22px 0 0;
    font-size: .59rem;
    letter-spacing: .15em;
  }
}