:root {
  --subpage-hero-overlay-bg: rgba(255, 255, 255, 0.6);

  --subpage-hero-height-desktop: 427px;
  --subpage-hero-height-mid:     320px;
  --subpage-hero-height-mobile:  254px;

  --subpage-hero-bg-position: 50% 55%;

  --subpage-hero-title-shift-desktop: -20px;
  --subpage-hero-title-shift-mobile:  -16px;
  --subpage-hero-decoration-bottom: -1px;

  --subpage-hero-max-width:       1920px;
  --subpage-hero-bg-scale-sp:     1.5;
  --subpage-hero-bg-origin-sp:    center 55%;
  --subpage-hero-aspect-ratio-sp: 375 / 254;
}

.c-subpage-hero {
  position: relative;
  width: 100%;
  max-width: var(--subpage-hero-max-width);
  margin-inline: auto;
  height: var(--subpage-hero-height-desktop);
  background-color: var(--color-bg);
}

/* Background image
========================================================================== */

.c-subpage-hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.c-subpage-hero__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--subpage-hero-bg-position);
}

/* Overlay — z-index 2
========================================================================== */

.c-subpage-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: var(--subpage-hero-overlay-bg);
}

/* Decoration — z-index 3
========================================================================== */

.c-subpage-hero__decoration {
  position: absolute;
  right: 0;
  left: 0;
  bottom: var(--subpage-hero-decoration-bottom);
  z-index: 3;
  pointer-events: none;
  height: var(--subpage-hero-height-desktop);
}

.c-subpage-hero__decoration-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
}

.c-subpage-hero__decoration-img--desktop { display: block; }
.c-subpage-hero__decoration-img--mobile  { display: none;  }

/* Inner / Title — z-index 4
========================================================================== */

.c-subpage-hero__inner {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--layout-padding-inline);
  box-sizing: border-box;
}

.c-subpage-hero__title {
  margin: 0;
  text-align: center;
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  transform: translateY(var(--subpage-hero-title-shift-desktop));
}

/* Mobile  (< 768px)
========================================================================== */

@media (max-width: 767px) {
  .c-subpage-hero {
    height: unset;
    min-height: var(--subpage-hero-height-mobile);
    aspect-ratio: var(--subpage-hero-aspect-ratio-sp);
    overflow: hidden;
  }

  .c-subpage-hero__bg {
    transform: scale(var(--subpage-hero-bg-scale-sp));
    transform-origin: var(--subpage-hero-bg-origin-sp);
  }

  .c-subpage-hero__inner {
    padding-inline: var(--layout-padding-inline-mobile);
  }

  .c-subpage-hero__title {
    width: min(100%, var(--layout-mobile-content));
    margin-inline: auto;
    font-size: var(--font-size-3xl);
    transform: translateY(var(--subpage-hero-title-shift-mobile));
  }

  .c-subpage-hero__decoration {
    height: var(--subpage-hero-height-mobile);
  }

  .c-subpage-hero__decoration-img--desktop { display: none;  }
  .c-subpage-hero__decoration-img--mobile  { display: block; }
}

/* Mid  (768px – 1439px)
========================================================================== */

@media (max-width: 1439px) and (min-width: 768px) {
  .c-subpage-hero {
    height: var(--subpage-hero-height-mid);
  }

  .c-subpage-hero__decoration {
    height: var(--subpage-hero-height-mid);
  }
}