.introduction {
  box-sizing: border-box;
  margin: 0 calc(16 * 100vw / var(--page-width)) 0;
  padding: calc(114 * 100vw / var(--page-width)) 0
    calc(47 * 100vw / var(--page-width));
  position: relative;
}

@media only screen and (min-width: 768px) {
  .introduction {
    margin-left: calc(16 * 100vw / var(--page-lg-width));
    margin-right: calc(16 * 100vw / var(--page-lg-width));
    padding-bottom: calc(180 * 100vw / var(--page-lg-width));
    padding-top: calc(192 * 100vw / var(--page-lg-width));
  }
}

.introduction_label {
  text-align: center;
}

.introduction_headline {
  align-items: center;
  column-gap: calc(10 * 100vw / var(--page-width));
  display: flex;
  flex-wrap: wrap;
  font-size: calc(46 * 100vw / var(--page-width));
  justify-content: center;
  letter-spacing: 1px;
  line-height: 0.9;
  margin: calc(32 * 100vw / var(--page-width)) auto 0;
  text-transform: uppercase;
  width: calc(327 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .introduction_headline {
    column-gap: calc(36 * 100vw / var(--page-lg-width));
    font-size: calc(116 * 100vw / var(--page-lg-width));
    line-height: 0.945;
    margin-top: calc(30 * 100vw / var(--page-lg-width));
    width: calc(770 * 100vw / var(--page-lg-width));
  }
}

.introduction_headline_alternate {
  font-size: calc(24 * 100vw / var(--page-width));
  text-transform: lowercase;
}

@media only screen and (min-width: 768px) {
  .introduction_headline_alternate {
    font-size: calc(60 * 100vw / var(--page-lg-width));
  }
}

.introduction_subtitle {
  margin-top: calc(20 * 100vw / var(--page-width));
  text-align: center;
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .introduction_subtitle {
    align-self: flex-end;
    margin-bottom: calc(10 * 100vw / var(--page-lg-width));
    margin-top: auto;
    text-align: left;
    width: auto;
  }
}

.introduction_description {
  font-size: calc(24 * 100vw / var(--page-width));
  letter-spacing: 0.5px;
  line-height: 1.17;
  margin: calc(82 * 100vw / var(--page-width)) auto 0;
  text-align: center;
}

@media only screen and (min-width: 768px) {
  .introduction_description {
    font-size: calc(32 * 100vw / var(--page-lg-width));
    letter-spacing: 0;
    line-height: 1.25;
    margin-left: calc(490 * 100vw / var(--page-lg-width));
    margin-top: calc(186 * 100vw / var(--page-lg-width));
    text-align: left;
    width: calc(480 * 100vw / var(--page-lg-width));
  }
}

.introduction_decoration {
  margin-top: calc(86 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .introduction_decoration {
    left: calc(-16 * 100vw / var(--page-lg-width));
    margin-top: 0;
    position: absolute;
    top: calc(303 * 100vw / var(--page-lg-width));
  }
}

.introduction_decoration p {
  display: none;
  line-height: 1;
  margin-left: calc(24 * 100vw / var(--page-width));
  width: calc(50 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .introduction_decoration p {
    display: block;
    margin-left: calc(140 * 100vw / var(--page-lg-width));
    width: calc(70 * 100vw / var(--page-lg-width));
  }
}

.decoration-introduction-2 {
  margin-top: calc(-40 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .decoration-introduction-2 {
    display: block;
    left: auto;
    margin-top: 0;
    right: calc(-16 * 100vw / var(--page-lg-width));
    top: calc(524 * 100vw / var(--page-lg-width));
    width: calc(620 * 100vw / var(--page-lg-width));
  }
}

.decoration-introduction-2 p {
  display: block;
  margin-bottom: 0;
  margin-left: calc(243 * 100vw / var(--page-width));
  width: calc(100 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .decoration-introduction-2 p {
    margin-left: calc(280 * 100vw / var(--page-lg-width));
    width: calc(170 * 100vw / var(--page-lg-width));
  }
}

.introduction-image {
  height: calc(266 * 100vw / var(--page-width));
  position: relative;
  width: calc(220 * 100vw / var(--page-width));
}

@media only screen and (min-width: 768px) {
  .introduction-image {
    --swap-time: 250ms;

    height: calc(460 * 100vw / var(--page-lg-width));
    left: calc(-5 * 100vw / var(--page-lg-width));
    overflow: hidden;
    position: absolute;
    top: calc(252 * 100vw / var(--page-lg-width));
    transition-delay: var(--swap-time);
    transition: filter var(--swap-time) ease-in;
    width: calc(380 * 100vw / var(--page-lg-width));
  }
}

@media only screen and (min-width: 768px) {
  .introduction-image.on-focus img {
    filter: blur(0px);
  }
}

.introduction-image-overlay {
  background-color: var(--color-dark);
  bottom: 0;
  left: 0;
  opacity: 0.2;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.introduction-image img {
  display: block;
  height: 100%;
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .introduction-image img {
    filter: blur(3px);
  }
}

.introduction-image-2 {
  display: none;
}

@media only screen and (min-width: 768px) {
  .introduction-image-2 {
    display: block;
    height: calc(460 * 100vw / var(--page-lg-width));
    left: auto;
    right: 0;
    top: calc(144 * 100vw / var(--page-lg-width));
    width: calc(615 * 100vw / var(--page-lg-width));
  }

  .introduction-image-2 img {
    height: calc(460 * 100vw / var(--page-lg-width));
    width: calc(620 * 100vw / var(--page-lg-width));
  }
}