.seoul-image-banner {
  position: relative;
  min-height: var(--seoul-height);
  margin: 0;
  overflow: hidden;
  color: rgb(var(--seoul-text));
  background: rgb(var(--seoul-background));
  border-radius: var(--seoul-radius);
  font-family: var(--senro-sans);
  isolation: isolate;
}

.seoul-image-banner--viewport { height: 90vh; }

.seoul-image-banner__media,
.seoul-image-banner__overlay {
  position: absolute;
  z-index: -2;
  inset: 0;
}

.seoul-image-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.85) saturate(.9);
}

.seoul-image-banner__overlay {
  z-index: -1;
  background:
    linear-gradient(to bottom, rgb(var(--seoul-overlay-color) / calc(var(--seoul-overlay-opacity) * .5)), transparent 40%),
    linear-gradient(to top, rgb(var(--seoul-overlay-color) / calc(var(--seoul-overlay-opacity) * 1.5)), transparent 45%);
}

.seoul-image-banner .seoul-image-banner__content {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 120px;
  display: flex;
  width: 100%;
  max-width: 1440px;
  min-height: 0;
  padding: 0 48px;
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.seoul-image-banner--left .seoul-image-banner__content { align-items: flex-start; text-align: left; }
.seoul-image-banner--right .seoul-image-banner__content { align-items: flex-end; text-align: right; }

.seoul-image-banner__title {
  max-width: 600px;
  margin: 0 0 20px;
  color: rgb(var(--seoul-text));
  font-family: var(--senro-serif);
  font-size: clamp(64px, 12vw, var(--seoul-title-size));
  font-weight: 300;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: pre-line;
}

.seoul-image-banner__subtitle {
  max-width: 600px;
  margin: 0;
  color: rgb(var(--seoul-text));
  font-family: var(--senro-serif);
  font-size: clamp(18px, 2.5vw, 24px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .03em;
  opacity: .85;
}

.seoul-image-banner a.seoul-image-banner__button {
  margin-block-start: 36px;
  padding-block-end: 7px;
  color: rgb(var(--seoul-text));
  font-family: var(--senro-sans);
  font-size: 13px;
  letter-spacing: .18em;
  text-decoration: none;
  border-block-end: 1px solid currentcolor;
}

@media (max-width: 1024px) {
  .seoul-image-banner--viewport { height: 70vh; }
  .seoul-image-banner .seoul-image-banner__content { padding-inline: 32px; }
}

@media (max-width: 768px) {
  .seoul-image-banner--viewport { height: 60vh; }
  .seoul-image-banner .seoul-image-banner__content { inset-block-end: 60px; padding-inline: 24px; }
  .seoul-image-banner__title { font-size: clamp(52px, 18vw, var(--seoul-title-mobile-size)); }
}