.hero-content-wrapper {
  position: relative;
  height: 300px;
}

@media (min-width: 360px) {
  .hero-content-wrapper {
    position: relative;
  }
}

@media (min-width: 550px) {
  .hero-content-wrapper {
    max-width: 920px;
    margin: 0 auto;
  }
}

@media (min-width: 1100px) {
  .hero-content-wrapper {
    max-width: 1240px;
    height: 400px;
  }
}

@media (min-width: 1500px) {
  .hero-content-wrapper {
    max-width: 1320px;
    height: 460px;
  }
}

.hero-image-wrapper {
  height: 100%;
  width: 100%;
  -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 100%, 0 100%, 0 0);
  clip-path: polygon(50% 0, 100% 25%, 100% 100%, 0 100%, 0 0);
}

.hero-image-text-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 144px;
  -webkit-clip-path: polygon(35% 0, 100% 69%, 100% 100%, 35% 65%, 0 84%, 0 15%);
  clip-path: polygon(35% 0, 100% 69%, 100% 100%, 35% 65%, 0 84%, 0 15%);
  background: hsla(216, 0%, 100%, 85%);
  top: 20%;
}

@media (prefers-color-scheme: dark) {
  .hero-image-text-wrapper {
    background: hsla(206, 22%, 14%, 85%);
  }
}

@media (min-width: 360px) {
  .hero-image-text-wrapper {
    max-height: 160px;
  }
}

@media (min-width: 550px) {
  .hero-image-text-wrapper {
    max-height: 180px;
  }
}

@media (min-width: 1100px) {
  .hero-image-text-wrapper {
    max-height: 200px;
  }
}

.hero-image-text-container {
  top: 19%;
  padding-left: 18px;
  position: relative;
}

@media (min-width: 360px) {
  .hero-image-text-container {
    top: 17%;
    padding-left: 24px;
  }
}

@media (min-width: 550px) {
  .hero-image-text-container {
    padding-left: 28px;
    top: 18%;
  }
}

@media (min-width: 1100px) {
  .hero-image-text-container {
    max-width: unset;
    top: 22%;
    padding-left: 36px;
  }
}

.hero-image-text-container h1 {
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-2xl);
  color: hsl(207, 100%, 45%);
}

@media (prefers-color-scheme: dark) {
  .hero-image-text-container h1 {
    color: hsl(203, 89%, 68%);
  }
}

@media (min-width: 360px) {
  .hero-image-text-container h1 {
    font-size: var(--font-3xl);
  }
}

@media (min-width: 550px) {
  .hero-image-text-container h1 {
    font-size: var(--font-4xl);
  }
}

@media (min-width: 1100px) {
  .hero-image-text-container h1 {
    font-size: var(--font-5xl);
  }
}

.hero-image-text-container h1 span {
  color: black;
}

@media (prefers-color-scheme: dark) {
  .hero-image-text-container h1 span {
    color: white;
  }
}

.hero-image-text-container p {
  margin-top: 1px;
  text-transform: uppercase;
  font-weight: bold;
}

@media (min-width: 360px) {
  .hero-image-text-container p {
    margin-top: 0;
  }
}

@media (min-width: 550px) {
  .hero-image-text-container p {
    font-size: var(--font-lg);
  }
}

@media (min-width: 1100px) {
  .hero-image-text-container p {
    font-size: var(--font-xl);
    margin-top: 2px;
  }
}