:root {
  --more-gap-art: clamp(3.5rem, calc(2.17647rem + 5.6471vw), 5rem);
  --more-gap-btn: clamp(0.625rem, calc(-0.14031rem + 3.2653vw), 3.125rem);
}

@media (min-width: 1280px) {
  :root { --more-gap-art: clamp(5.9375rem, calc(2.1875rem + 4.6875vw), 6.875rem);  }
}

.more__card { --corner-color: var(--indigo); background: transparent; color: var(--indigo); }

.section-intro p.more__cta { font-style: italic; font-weight: 700; margin-bottom: 0; }
.section-intro .btn--primary { width: 100%; margin-top: var(--more-gap-btn); }

.more__art { grid-column: 7 / span 6; grid-row: 1; align-self: center; }
.more__art img { display: block; width: 100%; height: auto; }

@media (max-width: 1279px) {
  .more__art { grid-row: 2; margin-top: var(--more-gap-art); }
}
@media (max-width: 799px) {
  .more .section-intro,
  .more__art { grid-column: 2 / span 10; }
}

@keyframes art-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(.37%, -.75%) rotate(1deg); }
  50%      { transform: translate(-.1%, -1.08%) rotate(-.25deg); }
  75%      { transform: translate(-.4%, -.53%) rotate(-1.08deg); }
}

.more.is-live .more__art img {
  animation: art-float 13s ease-in-out infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .more.is-live .more__art img { animation: none; }
}

.more__link {
  text-underline-offset: .18em;
  transition: color var(--t) ease;
}
.more__link:hover { color: var(--accent-primary-1); }