.ruby-video-reviews.ruby-video-experience {
  padding-block: clamp(56px, 7vw, 92px);
  background: linear-gradient(135deg, #fff 0%, #fff8fb 60%, #fce7f0 100%);
  color: var(--ruby-ink, #302029);
  border-block: 1px solid var(--ruby-border, #efd7e2);
  scroll-margin-top: 80px;
}

.ruby-video-experience .ruby-video-reviews__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, .9fr);
  gap: clamp(26px, 4.5vw, 72px);
  align-items: center;
}

.ruby-video-experience .ruby-video-reviews__gallery,
.ruby-video-experience .ruby-video-experience__story { min-width: 0; }

.ruby-video-experience .ruby-video-reviews__intro { max-width: 650px; margin-bottom: 4px; }
.ruby-video-experience .ruby-video-reviews__intro .ruby-kicker { color: #a71c5e; }
.ruby-video-experience .ruby-video-reviews__intro h2 {
  max-width: 640px;
  margin: 8px 0 10px;
  color: #84214f;
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  line-height: 1.1;
}
.ruby-video-experience .ruby-video-reviews__intro p { max-width: 600px; margin: 0; color: var(--ruby-muted, #735c67); }

.ruby-video-experience .ruby-video-reviews__controls { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.ruby-video-experience .ruby-video-reviews__track {
  gap: 14px;
  width: 100%;
  max-width: 100%;
  padding: 3px 2px 14px;
  scroll-padding-inline: 2px;
  scrollbar-width: none;
}
.ruby-video-experience .ruby-video-reviews__track::-webkit-scrollbar { display: none; }
.ruby-video-experience .ruby-video-reviews__track > .ruby-video-card {
  flex: 0 0 calc((100% - 28px) / 3);
  min-width: 0;
  border: 1px solid #efd7e2;
  border-radius: 18px;
  background: #1b1319;
  box-shadow: 0 12px 28px rgba(91, 29, 57, .09);
}
.ruby-video-experience .ruby-video-card__frame { border-radius: 17px; }
.ruby-video-experience .ruby-video-card--instagram iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.ruby-video-experience [data-ruby-video-chrome-free] video { cursor: pointer; }
.ruby-video-experience [data-ruby-video-chrome-free][data-playing] .ruby-video-card__play { opacity: 0; transition: opacity .2s ease; }
.ruby-video-experience [data-ruby-video-chrome-free][data-playing]:hover .ruby-video-card__play,
.ruby-video-experience [data-ruby-video-chrome-free][data-playing]:focus-within .ruby-video-card__play { opacity: 1; }
.ruby-video-experience [data-ruby-video-chrome-free] video:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.ruby-video-experience__story { max-width: 490px; }
.ruby-video-experience__story .ruby-kicker { color: #a71c5e; }
.ruby-video-experience__story h3 {
  margin: 8px 0 19px;
  color: #302029;
  font-family: var(--font-heading-family, sans-serif);
  font-size: clamp(1.65rem, 2.5vw, 2.55rem);
  line-height: 1.15;
  letter-spacing: -.03em;
}
.ruby-video-experience__lead { margin: 0 0 22px; color: var(--ruby-muted, #735c67); line-height: 1.6; }
.ruby-video-experience__highlights { padding: 0; margin: 0 0 26px; list-style: none; }
.ruby-video-experience__highlights li { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 18px; min-height: 96px; padding: 12px 0; border-top: 1px solid #ead4df; color: #493740; line-height: 1.5; }
.ruby-video-experience__highlights li:last-child { border-bottom: 1px solid #ead4df; }
.ruby-video-experience__highlights li p { margin: 0; font-size: .92rem; }
.ruby-video-experience__ring { --ruby-progress: 84%; position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: conic-gradient(#9b2157 var(--ruby-progress), #f0dce5 0); color: #84214f; font-size: .98rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ruby-video-experience__ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.ruby-video-experience__ring > span { position: relative; z-index: 1; }
.ruby-video-experience__story .ruby-button { display: inline-flex; min-height: 46px; }

@media (max-width: 1050px) {
  .ruby-video-experience .ruby-video-reviews__inner { grid-template-columns: minmax(0, 1.25fr) minmax(280px, .9fr); gap: 26px; }
  .ruby-video-experience .ruby-video-reviews__track > .ruby-video-card { flex-basis: calc((100% - 14px) / 2); }
}

@media (max-width: 800px) {
  .ruby-video-experience .ruby-video-reviews__inner { grid-template-columns: 1fr; }
  .ruby-video-experience__story { max-width: none; }
}

@media (max-width: 580px) {
  .ruby-video-reviews.ruby-video-experience { padding-block: 50px; }
  .ruby-video-experience .ruby-video-reviews__inner { width: 100%; gap: 32px; }
  .ruby-video-experience .ruby-video-reviews__intro { padding-inline: 16px; }
  .ruby-video-experience .ruby-video-reviews__intro h2 { font-size: clamp(2rem, 9vw, 2.75rem); }
  .ruby-video-experience .ruby-video-reviews__controls { padding-inline: 16px; }
  .ruby-video-experience .ruby-video-reviews__track { padding-inline: 16px; scroll-padding-inline: 16px; }
  .ruby-video-experience .ruby-video-reviews__track > .ruby-video-card { flex-basis: min(78vw, 330px); }
  .ruby-video-experience__story { padding-inline: 16px; }
  .ruby-video-experience__highlights li { grid-template-columns: 62px minmax(0, 1fr); gap: 14px; min-height: 86px; }
  .ruby-video-experience__ring { width: 62px; height: 62px; font-size: .82rem; }
  .ruby-video-experience__highlights li p { font-size: .86rem; }
}
