.sdx-editorial-layout {
  display: grid;
  gap: clamp(2rem,5vw,4rem)
}

.sdx-editorial-split {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(18rem,.82fr);
  gap: clamp(1.5rem,4vw,3rem);
  align-items: center
}

.sdx-editorial-split--reverse {
  grid-template-columns: minmax(18rem,.82fr) minmax(0,1fr)
}

.sdx-editorial-split--reverse .sdx-editorial-visual {
  order: -1
}

.sdx-editorial-visual {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--sdx-border);
  border-radius: 1.15rem;
  background: var(--sdx-surface);
  box-shadow: var(--sdx-card-shadow)
}

.sdx-editorial-visual img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 27rem;
  object-fit: cover
}

.sdx-editorial-visual figcaption {
  padding: .75rem 1rem;
  color: var(--sdx-text-soft);
  font-size: .84rem;
  line-height: 1.55
}

.sdx-editorial-visual--center {
  width: min(100%,46rem);
  margin-inline: auto
}

.sdx-editorial-note {
  padding: clamp(1.25rem,3vw,2rem);
  border: 1px solid var(--sdx-border);
  border-left: .4rem solid var(--sdx-erp-brand);
  border-radius: 1rem;
  background: color-mix(in srgb,var(--sdx-surface-solid) 76%,var(--sdx-erp-soft))
}

.sdx-editorial-note h3 {
  margin-top: 0;
  color: var(--sdx-text)
}

.sdx-editorial-note p:last-child {
  margin-bottom: 0
}

.sdx-editorial-quote {
  margin: 15px 0px;
  padding: clamp(1.5rem,3vw,2.25rem);
  border-radius: 1.15rem;
  color: var(--sdx-surface-solid);
  background: linear-gradient(135deg,var(--sdx-erp-deep),var(--sdx-erp-brand));
  box-shadow: var(--sdx-card-shadow)
}

.sdx-editorial-quote p {
  margin: 0;
  color: var(--sdx-surface-solid);
  font-size: clamp(1.15rem,2.2vw,1.5rem);
  font-weight: 700;
  line-height: 1.55
}

.sdx-editorial-columns {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(1.25rem,3vw,2.25rem);
  align-items: start
}

.sdx-editorial-columns>div {
  min-width: 0
}

.sdx-editorial-list {
  margin-bottom: 0
}

.sdx-editorial-section {
  scroll-margin-top: 7rem
}

.sdx-editorial-section>h2:first-child {
  margin-top: 0
}

@media (max-width:767.98px) {
  .sdx-editorial-split,.sdx-editorial-split--reverse,.sdx-editorial-columns {
    grid-template-columns: 1fr
  }
  .sdx-editorial-split--reverse .sdx-editorial-visual {
    order: initial
  }
  .sdx-editorial-visual img {
    max-height: none
  }
  .sdx-editorial-layout {
    gap: 2.25rem
  }
}