.msi-gallery {
  --msi-ink: currentColor;
  color: inherit;
  position: relative;
  overflow: clip;
  padding: clamp(80px, 9vw, 144px) clamp(16px, 4vw, 48px);
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.msi-gallery *, .msi-gallery *::before, .msi-gallery *::after { box-sizing: border-box; }

.msi-gallery::before {
  content: "";
  position: absolute;
  inset: clamp(16px, 3vw, 40px);
  z-index: -1;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: color-mix(in srgb, currentColor 4%, transparent);
}

.msi-shell { width: min(1180px, 100%); margin-inline: auto; }
.msi-head { display: grid; grid-template-columns: minmax(128px, .5fr) minmax(0, 1.5fr); gap: 32px; align-items: end; margin-bottom: clamp(40px, 6vw, 80px); }
.msi-head p { margin: 0; font: inherit; font-size: 12px; font-weight: 750; letter-spacing: .19em; text-transform: uppercase; opacity: .7; }
.msi-head h2 { margin: 0; max-width: 20ch; color: inherit; font: inherit; font-size: clamp(32px, 5vw, 72px); font-weight: 750; letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
.msi-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: clamp(16px, 2.5vw, 32px); }
.msi-card { grid-column: span 4; margin: 0; min-width: 0; }
.msi-media { position: relative; display: grid; place-items: center; min-height: 256px; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: color-mix(in srgb, currentColor 7%, transparent); }
.msi-media::after { content: ""; position: absolute; inset: 8%; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); pointer-events: none; }
.msi-media img { position: relative; z-index: 1; display: block; width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(0 18px 24px color-mix(in srgb, #000 16%, transparent)); transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.msi-card:hover img { transform: translateY(-6px) rotate(calc((var(--msi-index) - 1) * 1.2deg)) scale(1.025); }
.msi-card figcaption { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: baseline; padding-top: 16px; border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent); }
.msi-card figcaption span { font-size: 11px; letter-spacing: .12em; opacity: .58; }
.msi-card figcaption strong { color: inherit; font: inherit; font-size: clamp(16px, 1.6vw, 20px); font-weight: 700; line-height: 1.2; }

.msi-gallery[data-layout="cascade"] .msi-card:nth-child(2) { margin-top: clamp(32px, 7vw, 96px); }
.msi-gallery[data-layout="cascade"] .msi-card:nth-child(3) { margin-top: clamp(16px, 3vw, 48px); }
.msi-gallery[data-layout="museum"] .msi-card:first-child { grid-column: span 6; }
.msi-gallery[data-layout="museum"] .msi-card:nth-child(2), .msi-gallery[data-layout="museum"] .msi-card:nth-child(3) { grid-column: span 3; }
.msi-gallery[data-layout="museum"] .msi-card:first-child .msi-media { aspect-ratio: 1.3; }
.msi-gallery[data-layout="blueprint"] .msi-grid { border-block: 1px solid color-mix(in srgb, currentColor 22%, transparent); padding-block: clamp(16px, 3vw, 32px); }
.msi-gallery[data-layout="blueprint"] .msi-media { background-image: linear-gradient(color-mix(in srgb, currentColor 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, currentColor 7%, transparent) 1px, transparent 1px); background-size: 32px 32px; }
.msi-gallery[data-layout="orbit"] .msi-card:nth-child(2) { transform: translateY(clamp(24px, 5vw, 64px)); }
.msi-gallery[data-layout="orbit"] .msi-media { border-radius: 50%; }
.msi-gallery[data-layout="ribbon"] .msi-grid { gap: 0; }
.msi-gallery[data-layout="ribbon"] .msi-card { padding: clamp(12px, 2vw, 24px); border-inline-start: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.msi-gallery[data-layout="ribbon"] .msi-card:last-child { border-inline-end: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.msi-gallery[data-layout="ribbon"] .msi-media { background: transparent; }

/* Een illustratieset kan ook één verkoopmoment worden, in plaats van een galerij. */
.msi-gallery[data-layout="campaign"] {
  color: #fff7f2;
  padding: clamp(32px, 5vw, 72px) 0;
}
.msi-gallery[data-layout="campaign"]::before { display: none; }
.msi-gallery[data-layout="campaign"] .msi-shell { width: min(1140px, 92vw); }
.msi-campaign {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(420px, 1.18fr);
  min-height: clamp(440px, 45vw, 560px);
  overflow: hidden;
  border-radius: clamp(30px, 4vw, 48px);
  background:
    linear-gradient(118deg, rgba(199, 59, 111, .2), transparent 48%),
    linear-gradient(135deg, #2b1c18 0%, #45251f 100%);
  box-shadow: 0 36px 90px -46px rgba(43, 28, 24, .72);
}
.msi-campaign::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 247, 242, .2);
  border-radius: clamp(20px, 3vw, 34px);
  pointer-events: none;
}
.msi-campaign__copy {
  position: relative;
  z-index: 4;
  align-self: center;
  padding: clamp(44px, 7vw, 88px) 0 clamp(44px, 7vw, 88px) clamp(40px, 6vw, 76px);
}
.msi-campaign__kicker {
  margin: 0 0 18px;
  color: #f5b5cb;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.msi-campaign__copy h2 {
  max-width: 9ch;
  margin: 0;
  color: inherit;
  font: inherit;
  font-family: var(--f-display, Georgia, serif);
  font-size: clamp(42px, 5.3vw, 74px);
  font-weight: 650;
  letter-spacing: -.045em;
  line-height: .94;
  text-wrap: balance;
}
.msi-campaign__copy > p:not(.msi-campaign__kicker) {
  max-width: 38ch;
  margin: 24px 0 0;
  color: rgba(255, 247, 242, .82);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.58;
}
.msi-campaign__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 30px;
  padding: 11px 20px;
  border-radius: 999px;
  background: #c73b6f;
  color: #fff;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  transition: transform .25s ease, background-color .25s ease;
}
.msi-campaign__action:hover { background: #a42d59; transform: translateY(-2px); }
.msi-campaign__action:focus-visible { outline: 3px solid #fff7f2; outline-offset: 4px; }
.msi-campaign__line {
  display: block;
  width: min(190px, 70%);
  margin-top: 30px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 247, 242, .28);
  color: rgba(255, 247, 242, .7);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.msi-campaign__art {
  position: relative;
  min-width: 0;
  min-height: 440px;
}
.msi-campaign__art::before {
  content: "";
  position: absolute;
  inset: 12% 4% 8% 0;
  border-radius: 48% 42% 44% 46%;
  background: #fff0e8;
  transform: rotate(-4deg);
}
.msi-campaign__art img {
  position: absolute;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 28px 28px rgba(24, 12, 9, .34));
  transition: transform .65s cubic-bezier(.2, .8, .2, 1);
}
.msi-campaign__art .msi-campaign__deeg { z-index: 1; top: 1%; left: -4%; width: 52%; transform: rotate(-7deg); }
.msi-campaign__art .msi-campaign__brood { z-index: 3; right: -2%; bottom: -7%; width: 69%; transform: rotate(1deg); }
.msi-campaign__art .msi-campaign__ochtend { z-index: 2; top: -4%; right: -7%; width: 52%; transform: rotate(7deg); }
.msi-campaign:hover .msi-campaign__deeg { transform: translate(-5px, -5px) rotate(-8deg); }
.msi-campaign:hover .msi-campaign__brood { transform: translateY(-9px) rotate(0deg); }
.msi-campaign:hover .msi-campaign__ochtend { transform: translate(4px, -5px) rotate(8deg); }

@media (max-width: 860px) {
  .msi-campaign { grid-template-columns: 1fr; }
  .msi-campaign__copy { padding: 48px 42px 12px; }
  .msi-campaign__copy h2 { max-width: 12ch; font-size: clamp(42px, 10vw, 62px); }
  .msi-campaign__art { min-height: 390px; }
  .msi-campaign__art::before { inset: 7% 8% 5%; }
  .msi-campaign__art .msi-campaign__deeg { left: 0; width: 49%; }
  .msi-campaign__art .msi-campaign__brood { right: 3%; width: 62%; }
  .msi-campaign__art .msi-campaign__ochtend { right: 0; width: 47%; }
}

@media (max-width: 760px) {
  .msi-gallery { padding: 64px 16px; }
  .msi-gallery::before { inset: 8px; }
  .msi-head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }
  .msi-head h2 { font-size: clamp(32px, 11vw, 50px); }
  .msi-grid { display: flex; max-width: 100%; gap: 14px; overflow-x: auto; margin-inline: 0; padding: 8px 0 20px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .msi-card, .msi-gallery[data-layout] .msi-card { flex: 0 0 min(82vw, 352px); margin: 0; transform: none; scroll-snap-align: center; }
  .msi-media { min-height: 0; }
  .msi-gallery[data-layout="museum"] .msi-card:first-child .msi-media { aspect-ratio: 1; }
  .msi-gallery[data-layout="ribbon"] .msi-card { border: 0; padding: 0; }
  .msi-gallery[data-layout="campaign"] { padding: 28px 0 48px; }
  .msi-gallery[data-layout="campaign"] .msi-shell { width: min(100% - 32px, 560px); }
  .msi-campaign { border-radius: 30px; }
  .msi-campaign::after { inset: 10px; border-radius: 22px; }
  .msi-campaign__copy { padding: 40px 28px 6px; }
  .msi-campaign__copy > p:not(.msi-campaign__kicker) { margin-top: 18px; }
  .msi-campaign__action { width: 100%; margin-top: 24px; }
  .msi-campaign__line { margin-top: 22px; }
  .msi-campaign__art { min-height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .msi-media img, .msi-campaign__art img, .msi-campaign__action { transition: none; }
  .msi-campaign:hover .msi-campaign__deeg { transform: rotate(-7deg); }
  .msi-campaign:hover .msi-campaign__brood { transform: rotate(1deg); }
  .msi-campaign:hover .msi-campaign__ochtend { transform: rotate(7deg); }
}