.oem-scenes {
  padding: 50px 0 54px;
  background: #153562;
  color: #fbf3de;
  scroll-margin-top: 88px;
}

.oem-scenes-inner {
  width: min(1248px, calc(100% - 72px));
  margin-inline: auto;
}

.oem-scenes-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid #b39666;
}

.oem-scenes-heading h2 {
  margin: 0;
  color: inherit;
  font: 700 clamp(28px, 4vw, 47px)/1.2 var(--font-serif);
}

.oem-scenes-heading p {
  margin: 0 0 2px;
  color: #e8ddc6;
  font-size: 14px;
}

.oem-scenes-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 12px 20px;
}

.oem-scene {
  display: grid;
  grid-template-columns: 34% minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid #7b8da8;
}

.oem-scene--featured {
  grid-row: span 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  border: 0;
}

/* Show the four 370 × 246 photographs from the supplied reference. */
.oem-scene-photo {
  width: 100%;
  aspect-ratio: 370 / 246;
  background: #264675 url('../assets/img/oem-store-scenes.webp') var(--scene-x) 39.446% / 434.865% auto no-repeat;
}

.oem-scene-photo--wellness { --scene-x: 2.825%; }
.oem-scene-photo--beauty { --scene-x: 34.867%; }
.oem-scene-photo--spa { --scene-x: 66.909%; }
.oem-scene-photo--clinic { --scene-x: 98.951%; }

.oem-scene-copy { padding: 6px 0 6px 14px; }
.oem-scene--featured .oem-scene-copy { padding: 14px 0 0; }

.oem-scene-copy h3 {
  margin: 0 0 7px;
  color: inherit;
  font: 700 19px/1.4 var(--font-serif);
}

.oem-scene-copy p {
  margin: 0;
  color: #f6efdf;
  font: 14px/1.65 var(--font-sans);
}

.oem-scene-copy .oem-scene-products {
  margin-top: 4px;
  color: #ead4a8;
  font-size: 13px;
}

@media (max-width: 800px) {
  .oem-scenes-heading { display: block; }
  .oem-scenes-heading p { margin-top: 9px; }
  .oem-scenes-grid { grid-template-columns: 1fr; }
  .oem-scene--featured { grid-row: auto; }
}

@media (max-width: 500px) {
  .oem-scenes { padding: 32px 0; }
  .oem-scenes-inner { width: calc(100% - 32px); }
  .oem-scene-copy h3 { font-size: 17px; }
  .oem-scene-copy p,
  .oem-scene-copy .oem-scene-products { font-size: 12px; }
}