.sb-customization {
  width: 100%;
  margin: 8rem auto;
  padding: 2rem clamp(2rem, 3vw, 4rem);
  border-radius: 1.5rem;
  background: radial-gradient(ellipse at 80% 5%, #5b358c, transparent 60%), linear-gradient(145deg, #271445, #151027);
  color: #fff;
  scroll-margin-top: 110px;
}
.sb-customization-intro { max-width: 74rem; margin: 0 auto 1.6rem; text-align: center; }
.sb-customization-intro .sb-customization-kicker {
  margin: 0 0 1.2rem;
  color: #ffda73;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sb-customization-intro h2 {
  margin: 0 0 1.6rem;
  color: #fff;
  font-size: clamp(3.6rem, 5svh, 4.4rem);
  line-height: 1.2;
  letter-spacing: -.05em;
}
.sb-customization-intro > p:last-child { margin: 0; color: #e5dbf8; font-size: 1.6rem; line-height: 1.45; }
.sb-customization-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.sb-customization-grid article {
  min-width: 0;
  padding: 1.8rem;
  border: 1px solid #80649c;
  border-radius: 2.6rem;
  background: linear-gradient(145deg, #fffdf4, #f2ecff);
  color: #281544;
}
.sb-customization-grid h3 { margin: 1.6rem 0 1rem; font-size: clamp(2rem, 2vw, 2.6rem); line-height: 1.1; letter-spacing: -.025em; }
.sb-customization-grid p { margin: 0 0 1.6rem; font-size: 1.6rem; line-height: 1.45; }
.sb-customization-detail { color: #65409b; font-size: 1.4rem; font-weight: 600; }
.sb-customization-capture { --capture-height: clamp(10rem, calc(100svh - 550px), 32rem); display: grid; place-items: center; width: 100%; height: var(--capture-height); }
.sb-customization-capture > span { display: block; width: min(100%, calc(var(--capture-height) * var(--capture-ratio))); aspect-ratio: var(--capture-ratio); overflow: hidden; border-radius: 1.2rem; }
.sb-customization-capture img { display: block; max-width: none; height: auto; }
.sb-customization-capture:focus-visible { outline: 3px solid #6747e7; outline-offset: 4px; }
.sb-customization-note { margin: 2rem auto 0; max-width: 78rem; text-align: center; color: #d9cbe9; font-size: 1.4rem; line-height: 1.5; }
@media (min-width: 768px) {
  .sb-customization { min-height: min(68.4rem, calc(100svh - 140px)); display: flex; flex-direction: column; justify-content: center; }
  .sb-customization-intro h2 br { display: none; }
}
@media (min-width: 768px) and (max-height: 740px) {
  .sb-customization { padding-block: 1.6rem; }
  .sb-customization-intro { margin-bottom: 1.6rem; }
  .sb-customization-intro h2 { font-size: 3.6rem; margin-bottom: 1rem; }
  .sb-customization-grid article { padding: 1.8rem; }
  .sb-customization-note { margin-top: 1.6rem; }
}
@media (max-width: 767px) {
  .sb-customization { margin: 5rem auto; border-radius: 2.4rem; }
  .sb-customization-grid { grid-template-columns: minmax(0, 1fr); }
  .sb-customization-capture { --capture-height: 32rem; }
}
@media (max-width: 400px) {
  .sb-customization { padding-inline: 1.6rem; }
}