.hero-benefits-glas {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 64rem) {
  .hero-benefits-glas {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    gap: 24px;
  }
}
@media (min-width: 80rem) {
  .hero-benefits-glas {
    gap: 40px;
  }
}
.hero-benefits-glas .wrapper-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 64rem) {
  .hero-benefits-glas .wrapper-content {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }
}
.hero-benefits-glas .wrapper-content .headline-group,
.hero-benefits-glas .wrapper-content .wrapper-list {
  flex: 0 0 auto;
}
@media (min-width: 64rem) {
  .hero-benefits-glas .wrapper-content .headline-group,
  .hero-benefits-glas .wrapper-content .wrapper-list {
    flex: 0 0 50%;
  }
}
@media (min-width: 64rem) {
  .hero-benefits-glas .wrapper-content .wrapper-list {
    padding-top: 44px;
  }
}
@media (min-width: 64rem) {
  .hero-benefits-glas .image-wrapper,
  .hero-benefits-glas .image {
    --img-border-radius: 0px !important;
  }
}
.hero-benefits-glas .image-wrapper img,
.hero-benefits-glas .image img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  aspect-ratio: 4/3;
}
@media (min-width: 64rem) {
  .hero-benefits-glas .image-wrapper img,
  .hero-benefits-glas .image img {
    aspect-ratio: 16/9 !important;
  }
}
.hero-benefits-glas .teaser-wrapper {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
@media (min-width: 64rem) {
  .hero-benefits-glas .teaser-wrapper {
    position: absolute;
    right: 24px;
    bottom: 24px;
    gap: 24px;
  }
}
@media (min-width: 80rem) {
  .hero-benefits-glas .teaser-wrapper {
    right: 40px;
    bottom: 40px;
  }
}
.hero-benefits-glas .teaser-glas {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 0 calc(50% - 8px);
  gap: 16px;
  border-radius: 32px;
  overflow: hidden;
  padding: 16px;
  backdrop-filter: blur(32px) saturate(100%);
  border: 1px solid hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.1);
}
@media (min-width: 64rem) {
  .hero-benefits-glas .teaser-glas {
    padding: 20px;
    width: 208px;
    height: 235px;
  }
}
@media (min-width: 80rem) {
  .hero-benefits-glas .teaser-glas {
    padding: 29px 25px 29px 22px;
    width: 238px;
    height: 265px;
  }
}
.hero-benefits-glas .teaser-glas.teaser-primary {
  background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.1);
}
.hero-benefits-glas .teaser-glas.teaser-black {
  background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.1);
}
.hero-benefits-glas .teaser-glas .teaser-glas-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-benefits-glas .teaser-glas .teaser-sub-headline {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
}
@media (min-width: 64rem) {
  .hero-benefits-glas .teaser-glas .teaser-sub-headline {
    font-size: 60px;
  }
}
.hero-benefits-glas .teaser-glas .teaser-headline,
.hero-benefits-glas .teaser-glas .teaser-copy {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-white);
}
@media (min-width: 64rem) {
  .hero-benefits-glas .teaser-glas .teaser-headline,
  .hero-benefits-glas .teaser-glas .teaser-copy {
    font-size: 18px;
  }
}
.hero-benefits-glas .teaser-glas .teaser-glas-svg {
  position: absolute;
  bottom: 0;
  right: 0px;
  left: 0px;
  z-index: 0;
  width: 90%;
}
.hero-benefits-glas .teaser-glas .teaser-glas-footer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}