.section--instagram-banner {
  padding: 58px 0;
  background: #eef8fb;
}

.instagram-banner {
  position: relative;
  display: block;
  aspect-ratio: 16 / 5;
  min-height: 0;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  border: 0;
  background-color: #dceff5;
  background-size: cover;
  background-position: center;
  box-shadow: 0 22px 52px rgba(18, 63, 100, .18);
  isolation: isolate;
  container-type: inline-size;
}

.instagram-banner--variant-a {
  background-image: url("../img/hero-kanzaki-beach-v3-empty-bright.jpg");
  background-position: center 65%;
}

.instagram-banner--variant-a::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  background: url("../img/instagram/instagram-banner-variant-a.webp") center / cover no-repeat;
  clip-path: polygon(0 0, 36% 0, 38% 58%, 48% 100%, 0 100%);
  pointer-events: none;
}

.instagram-banner--variant-b {
  background-image: linear-gradient(90deg, rgba(28, 9, 47, .46) 0%, rgba(28, 9, 47, .08) 42%, rgba(28, 9, 47, 0) 62%), url("../img/instagram/instagram-banner-variant-b.webp");
}

.instagram-banner__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2.32cqw;
  min-height: 0;
  padding: 3.04cqw 3.93cqw;
}

.instagram-banner--variant-b .instagram-banner__content { justify-content: flex-start; }

.instagram-banner__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 33.04cqw;
  color: #123d57;
  text-shadow: none;
}

.instagram-banner__kicker {
  margin-bottom: .89cqw;
  color: #8a4b20;
  font-family: var(--font-en);
  font-size: 1.16cqw;
  font-weight: 800;
  letter-spacing: .08em;
}

.instagram-banner__copy strong {
  font-family: var(--font-body);
  font-size: 2.55cqw;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .02em;
}

.instagram-banner__lead {
  margin-top: 1.07cqw;
  color: #fff;
  font-family: var(--font-body);
  font-size: 1.31cqw;
  font-weight: 700;
  line-height: 1.72;
  text-shadow: none;
}

.instagram-banner__action {
  display: inline-flex;
  align-items: center;
  gap: .71cqw;
  margin-top: 1.61cqw;
  padding-bottom: .36cqw;
  border-bottom: .18cqw solid rgba(255, 255, 255, .86);
  font-size: 1.38cqw;
  font-family: var(--font-body);
  font-weight: 900;
  text-shadow: none;
  white-space: nowrap;
}

.instagram-banner__action span { transition: transform .25s ease; }
.instagram-banner:hover .instagram-banner__action span { transform: translate(3px, -3px); }

.instagram-banner__qr-wrap {
  display: grid;
  justify-items: center;
  gap: .45cqw;
  flex: 0 0 auto;
  padding: .89cqw;
  background: #fff;
  color: #24475f;
  box-shadow: 0 12px 32px rgba(4, 29, 50, .24);
  text-shadow: none;
}

.instagram-banner__qr {
  width: 11.07cqw;
  height: 11.07cqw;
  object-fit: contain;
}

.instagram-banner__qr-wrap small { font-size: .95cqw; font-weight: 800; }

@keyframes homeEntranceFade {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes homeHeroImageFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes homeHeroImageZoom {
  from { transform: scale(1.04); }
  to { transform: scale(1.075); }
}

.page-home .site-header__inner,
.page-home .hero-lab__label,
.page-home .hero-lab__mark,
.page-home .hero-lab__lead,
.page-home .hero-lab__actions,
.page-home .hero-lab__album {
  animation-name: homeEntranceFade;
  animation-duration: .85s;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
  animation-fill-mode: both;
}

.page-home .site-header__inner { animation-delay: .04s; }
.page-home .hero-lab__label { animation-delay: .1s; }
.page-home .hero-lab__mark { animation-delay: .18s; }
.page-home .hero-lab__lead { animation-delay: .28s; }
.page-home .hero-lab__album { animation-delay: .3s; }
.page-home .hero-lab__actions { animation-delay: .38s; }

.page-home .hero-lab::before {
  animation:
    homeHeroImageFade 2.2s cubic-bezier(.45, 0, .55, 1) both,
    homeHeroImageZoom 22s ease-in-out 2.2s infinite alternate;
}

.page-home .hero-lab__photo {
  animation: none;
}

@media (max-width: 760px) {
  .section--instagram-banner { padding: 40px 0; }
  .section--instagram-banner .container { width: calc(100% - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .site-header__inner,
  .page-home .hero-lab__label,
  .page-home .hero-lab__mark,
  .page-home .hero-lab__lead,
  .page-home .hero-lab__actions,
  .page-home .hero-lab__album { animation: none; }
  .page-home .hero-lab::before,
  .page-home .hero-lab__photo { animation: none; }
}