.sed-rail {
  overflow: clip;
  padding-block: clamp(5rem, 9vw, 9rem);
}

.sed-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sed-space-3);
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
  padding-top: 1.25rem;
  border-top: 1px solid currentColor;
}

.sed-section-heading > * { min-width: 0; }

.sed-section-heading h2 {
  max-width: 15ch;
  margin-bottom: 0;
  font-size: clamp(2.45rem, 5vw, 5.8rem);
  text-transform: uppercase;
}

.sed-rail__controls {
  --sed-arrow-control-size: 3.25rem;
  --sed-arrow-chevron-size: 0.58rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.sed-rail__controls button,
.sed-rail__controls span {
  display: grid;
  min-width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: var(--sed-radius-md);
  background: transparent;
  color: inherit;
  font-family: var(--sed-font);
  font-size: 0.7rem;
}

.sed-rail__controls button { position: relative; width: var(--sed-arrow-control-size); min-width: var(--sed-arrow-control-size); height: var(--sed-arrow-control-size); padding: 0; opacity: 1; cursor: pointer; font-size: 0; }
.sed-rail__controls button:is(:hover, :focus-visible) { background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }
.sed-rail__controls button[aria-disabled="true"] { opacity: 1; cursor: default; }
.sed-rail__controls button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: var(--sed-arrow-chevron-size);
  height: var(--sed-arrow-chevron-size);
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  content: "";
}
.sed-rail__controls [data-rail-prev]::before { transform: translate(-50%, -50%) rotate(-135deg); }
.sed-rail__controls [data-rail-next]::before { transform: translate(-50%, -50%) rotate(45deg); }
.sed-rail__controls span {
  min-width: 5.5rem;
  border: 0;
  border-radius: var(--sed-radius-md);
  letter-spacing: 0.12em;
}

@media (max-width: 48rem) {
  .sed-rail__controls {
    --sed-arrow-control-size: 2.75rem;
    --sed-arrow-chevron-size: 0.52rem;
  }
}

.sed-rail__track {
  display: grid;
  grid-auto-columns: minmax(min(82vw, 22rem), 27vw);
  grid-auto-flow: column;
  gap: clamp(0.75rem, 1.4vw, 1.5rem);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-inline: max(calc((100vw - 86rem) / 2), clamp(1rem, 2.5vw, 3rem));
  padding-block: 0 1.5rem;
  scroll-padding-inline: max(calc((100vw - 86rem) / 2), clamp(1rem, 2.5vw, 3rem));
  scroll-snap-type: inline mandatory;
  scrollbar-color: currentColor transparent;
  cursor: grab;
}

.sed-rail[data-dragging="true"] .sed-rail__track {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.sed-rail__item {
  min-width: 0;
  overflow: hidden;
  background: transparent;
  scroll-snap-align: start;
}

@media (max-width: 48rem) {
  .sed-section-heading {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .sed-section-heading h2 { font-size: clamp(2.1rem, 10.5vw, 4.5rem); }
  .sed-rail__track { grid-auto-columns: min(86vw, 23rem); }
}