.brand-story-split {
  color: rgb(var(--story-text));
  background: rgb(var(--story-background));
  font-family: var(--senro-sans);
  font-weight: 300;
}

.brand-story-split .brand-story-split__inner {
  display: grid;
  width: 100%;
  max-width: 1440px;
  padding: var(--story-padding-top) 48px var(--story-padding-bottom);
  margin: 0 auto;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}

.brand-story-split--left .brand-story-split__copy { order: 2; }
.brand-story-split--left .brand-story-split__visual { order: 1; }

.brand-story-split__copy {
  display: block;
  padding: 0;
}

.brand-story-split__eyebrow {
  margin-block-end: 24px;
  color: rgb(var(--story-eyebrow));
  font-family: var(--senro-sans);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.brand-story-split__divider {
  display: block;
  width: 40px;
  height: 1px;
  margin: 0 0 32px;
  background: rgb(var(--story-accent));
}

.brand-story-split__heading {
  max-width: 500px;
  margin: 0 0 32px;
  color: rgb(var(--story-text));
  font-family: var(--senro-serif);
  font-size: clamp(40px, 6vw, var(--story-heading-size));
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .01em;
}

.brand-story-split__body {
  max-width: 480px;
  margin: 0 0 40px;
  color: rgb(var(--story-muted));
  font-family: var(--senro-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.9;
}

.brand-story-split__body p { margin: 0; }

.brand-story-split__quote {
  max-width: 440px;
  margin: 0;
  padding-inline-start: 32px;
  color: rgb(var(--story-text));
  font-family: var(--senro-serif);
  font-size: 22px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .01em;
  border-inline-start: 1px solid rgb(var(--story-accent));
}

.brand-story-split a.brand-story-split__button {
  display: inline-block;
  margin-block-start: 36px;
  padding-block-end: 7px;
  color: rgb(var(--story-text));
  font-size: 13px;
  letter-spacing: .18em;
  text-decoration: none;
  border-block-end: 1px solid currentcolor;
}

.brand-story-split__visual {
  display: flex;
  padding: 0;
  background: rgb(var(--story-panel));
  align-items: center;
}

.brand-story-split__frame {
  position: relative;
  display: flex;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  color: rgb(var(--story-muted));
  border: 0;
  align-items: center;
  justify-content: center;
}

.brand-story-split__frame::before {
  position: absolute;
  z-index: 1;
  inset: 24px;
  content: "";
  border: 1px solid rgb(var(--story-muted) / 25%);
  pointer-events: none;
}

.brand-story-split__frame img { width: 100%; height: 100%; object-fit: cover; }

.brand-story-split__frame span {
  font-family: var(--senro-serif);
  font-size: 120px;
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  letter-spacing: .1em;
}

@media (max-width: 1024px) {
  .brand-story-split .brand-story-split__inner {
    padding: min(var(--story-padding-top), 120px) 32px min(var(--story-padding-bottom), 120px);
    gap: 60px;
  }
}

@media (max-width: 768px) {
  .brand-story-split .brand-story-split__inner {
    padding: min(var(--story-padding-top), 80px) 24px min(var(--story-padding-bottom), 80px);
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .brand-story-split--left .brand-story-split__copy,
  .brand-story-split--left .brand-story-split__visual { order: initial; }
  .brand-story-split__visual { max-height: 500px; }
}