.page-range-page--parent {
  .page-range-page--banner {
    position: relative;
  }

  .page-range-page--banner .component-wrapper-picture--picture-image {
    width: 100%;
    height: 18.75rem;
    object-fit: cover;
    object-position: center;
  }
  .page-range-page--titles {
    padding: 0 0 4.06rem;
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    align-items: flex-start;
    justify-content: center;
    max-width: min(80vw, 94rem);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 10;
  }

  .page-range-page--titles .page-range-page--title {
    color: var(--white);
    font-family: var(--font-family);
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 850;
    line-height: 1.938rem;
    text-transform: uppercase;
  }

  .page-range-page--titles .page-range-page--subtitle {
    color: var(--white);
    font-family: var(--font-family-firaSans);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    text-transform: uppercase;
  }

  .page-range-page--children-range {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .page-range-page--child-range {
    position: relative;
    aspect-ratio: 1/1;
    width: 100%;
    height: 100%;
  }

  .page-range-page--background-img {
    background-color: var(--rangeColor);
  }

  .page-range-page--background-img img {
    height: auto;
    width: 100%;
  }

  .page-range-page--img {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    height: 100%;
  }

  .page-range-page--img picture {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .page-range-page--img img {
    min-height: min(33.645vw, 9rem);
    height: 70%;
    width: 70%;
  }

  .page-range-page--child-range .page-range-page--child-range-content {
    position: absolute;
    height: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-color: var(--rangeColor);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .page-range-page--child-range .page-range-page--child-range-content .topic-title-text {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 1rem;
  }

  .page-range-page--child-range .page-range-page--child-range-content .topic-title-text .topic-title-text--title {
    color: color-mix(in srgb, var(--rangeColor), black 60%);
    text-align: center;
    font-family: var(--font-family-firaSans);
    font-size: min(5.6vw, 1.5rem);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.045rem;
    text-transform: uppercase;
  }

  .page-range-page--child-range .page-range-page--child-range-content .topic-title-text h2.topic-title-text--title {
    text-align: center;
    font-family: var(--font-family-FiraSans--condensed-semiBold);
    font-size: min(5.84vw, 1.563rem);
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.045rem;
    text-transform: uppercase;
  }

  .page-range-page--child-range .page-range-page--child-range-content .topic-title-text .topic-title-text--text {
    color: color-mix(in srgb, var(--rangeColor), black 60%);
    text-align: center;
    font-family: var(--font-family-firaSans);
    font-size: min(5.14vw, 1.375rem);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
  }

  .page-range-page--child-range .page-range-page--child-range-content .page-range-page--title {
    color: var(--white);
    font-family: var(--font-family);
    font-size: min(6.31vw, 1.6875rem);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    text-align: center;
  }

  .page-range-page--child-range .page-range-page--child-range-content .page-range-page--subtitle {
    color: var(--white);
    font-family: var(--font-family-FiraSans--condensed-semiBold);
    font-size: min(3.27vw, 0.875rem);
    font-style: normal;
    line-height: normal;
    text-transform: uppercase;
  }

  .topic-title-text:not(:has(.topic-title-text--title__h2)) {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;

    width: var(--content-width);
    max-width: var(--max-content-width);
    margin: 4.5rem auto 1.25rem;
    z-index: 1;
    position: relative;
  }

  .topic-title-text:not(:has(.topic-title-text--title__h2)) .topic-title-text--title {
    color: var(--primary);
    font-family: var(--font-family);
    font-size: min(8.411vw, 2.25rem);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
  }

  .topic-title-text:not(:has(.topic-title-text--title__h2)) .topic-title-text--text {
    color: var(--black);
    font-family: var(--font-family-firaSans);
    font-size: min(3.74vw, 1rem);
    font-style: normal;
    font-weight: 400;
    line-height: 1.5em;
  }
}

@media screen and (min-width: 28.125rem /* 450px */) {
  .page-range-page--parent {
    .page-range-page--titles {
      padding: 2.75rem 0 4.06rem;
    }
  }
}

@media screen and (max-width: 63.938rem) {
  .page-range-page--parent {
    .page-range-page--banner::after {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      content: '';
      display: block;
      background-image: url("../img/mobile-title-2-3aa82e9005aed89e73737b6a1d476b14.webp");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 100%;
      height: 15.56556rem;
      z-index: 1;
    }

    .page-range-page--child-range .page-range-page--child-range-content .topic-title-text {
      display: none;
    }
  }
}

@media screen and (min-width: 64rem) {
  .page-range-page--parent {
    .page-range-page--banner .component-wrapper-picture--picture-image {
      width: 100%;
      height: 43.75rem;
      object-fit: cover;
      object-position: right;
    }

    .page-range-page--banner::after {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 16rem;
      content: '';
      mask-image: url("../img/range-title-desktop-aa997866028ff0077a1203f5546ec436.svg");
      mask-repeat: no-repeat;
      mask-size: cover;
      mask-position: right;
      pointer-events: none;
      background-color: var(--primary);
      z-index: 1;
    }

    .page-range-page--titles {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      padding: 0;
    }

    .page-range-page--title {
      max-width: 49.5625rem;
    }

    .page-range-page--titles .page-range-page--title {
      font-size: 3.75rem;
      line-height: 3.8125rem;
    }

    .page-range-page--titles .page-range-page--subtitle {
      font-size: 2rem;
    }

    .page-range-page--child-range {
      aspect-ratio: 2/1;
    }

    .page-range-page--child-range a {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }

    .page-range-page--background-img,
    .page-range-page--img {
      grid-column: 2;
      grid-row: 1;
      position: relative;
      padding: 0;
    }

    .page-range-page--img picture {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .page-range-page--img img {
      height: calc(100% - 4rem);
      width: 100%;
    }

    .page-range-page--child-range .page-range-page--child-range-content {
      grid-column: 1;
      grid-row: 1;
      position: relative;
      height: 100%;
      justify-content: center;
      padding: 1rem 0;
    }

    .topic-title-text:not(:has(.topic-title-text--title__h2)) {
      align-items: center;
      margin: 5.31rem auto 2rem;
    }

    .topic-title-text:not(:has(.topic-title-text--title__h2)) .topic-title-text--title {
      text-align: center;
      font-size: 3.75rem;
    }

    .topic-title-text:not(:has(.topic-title-text--title__h2)) .topic-title-text--text {
      text-align: center;
      font-size: 1.5rem;
      line-height: 1.9375rem;
    }
  }
}

@media screen and (min-width: 80rem) {
  .page-range-page--parent {
    .page-range-page--banner .component-wrapper-picture--picture-image {
      object-fit: contain;
    }

    .page-range-page--banner::after {
      right: 20rem;
    }

    .page-range-page--img img {
      height: calc(100% - 8rem);
    }

    .page-range-page--child-range .page-range-page--child-range-content {
      padding: 2rem 0;
    }

    .page-range-page--child-range .page-range-page--child-range-content .page-range-page--title {
      font-size: 3rem;
      margin-top: auto;
    }

    .page-range-page--child-range .page-range-page--child-range-content .page-range-page--subtitle {
      font-size: 1.5rem;
    }

    .page-range-page--child-range .page-range-page--child-range-content .topic-title-text {
      gap: 1.25rem;
      padding: 0;
      max-width: min(90%, 19.375rem);
    }
  }
}

@media screen and (min-width: 90rem) {
  .page-range-page--parent {
    .page-range-page--child-range .page-range-page--child-range-content .page-range-page--title {
      margin-top: 3rem;
    }
    .page-range-page--banner::after {
      right: 30rem;
    }
  }
}

@media screen and (min-width: 120rem) {
  .page-range-page--parent {
    .page-range-page--banner::after {
      right: 37rem;
    }

    .page-range-page--child-range .page-range-page--child-range-content {
      padding: 4.31rem 0;
    }
  }
}