.teaser .teaser-border-container {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-width: 10px;
  border-style: solid;
  border-color: var(--line-grey);
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(0% 0%, 0 35%, 1% 43%, 1% 2%, 100% 2%, 100% 0);
          clip-path: polygon(0% 0%, 0 35%, 1% 43%, 1% 2%, 100% 2%, 100% 0);
}
.teaser .teaser-container {
  position: relative;
  z-index: 1;
  border-style: solid;
}
.teaser .teaser-wrap {
  display: grid;
  grid-template-areas: "description logo-container";
  grid-template-columns: repeat(2, 1fr);
}
.teaser .style-h3 {
  grid-area: description;
  display: flex;
  padding: 3em;
  padding: clamp(1em, 3vw, 3em);
  text-align: right;
  justify-content: baseline;
}
.teaser .teaser-logo-container {
  grid-area: logo-container;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.teaser .teaser-logo {
  position: relative;
  background-color: #fff;
  width: 10.722em;
  width: clamp(5.833em, 15vw, 10.77em);
  aspect-ratio: 0.77/1;
  transform: translate(75%, -5%);
}
.teaser .teaser-logo .teaser-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -50%;
  transform: translate(-15%, 0);
  z-index: -1;
  border-width: 15em;
  border-width: clamp(8em, 29vw, 15em);
  border-style: solid;
  border-color: #fff;
  width: 100%;
  -webkit-clip-path: polygon(0 0, 49% 0, 60% 6%, 0 30%);
          clip-path: polygon(0 0, 49% 0, 60% 6%, 0 30%);
}
.teaser .teaser-logo img {
  width: 100%;
  height: 100%;
}
.teaser .teaser-dots {
  width: 13.44em;
  width: clamp(7.27em, 20vw, 13.44em);
  aspect-ratio: 1;
  transform: translate(10%, -55%);
}
.teaser .teaser-dots img {
  width: 100%;
  height: 100%;
}

@media (max-width: 600px) {
  .teaser {
    margin-top: 4em;
  }
  .teaser .teaser-border-container {
    -webkit-clip-path: polygon(0% 0%, 0 9%, 1% 13%, 1% 1%, 100% 1%, 100% 0%);
            clip-path: polygon(0% 0%, 0 9%, 1% 13%, 1% 1%, 100% 1%, 100% 0%);
  }
  .teaser .teaser-logo {
    transform: translate(75%, -15%);
  }
  .teaser .teaser-logo .teaser-background {
    transform: translate(-15%, 4%);
  }
  .teaser .teaser-wrap {
    grid-template-areas: " logo-container logo-container" "description description";
    grid-template-columns: 1fr;
  }
  .teaser .style-h3 {
    text-align: center;
    justify-content: center;
    padding-top: 0;
    margin-top: -2em;
  }
  .teaser .teaser-logo-container {
    flex-direction: column;
    align-items: center;
  }
}