.teaser-wrapper {
  display: flex;
  flex-direction: column;
  padding: 30px;
  align-items: center;
  gap: 30px;
  align-self: stretch;
  border-radius: 50px;
  box-shadow: $box-shadow-standard;

  a {
    display: contents;
  }

  @media (min-width: $breakpoint_lg) {
    border-radius: 80px;
    flex-direction: row;
    padding: 40px 60px;
    align-items: center;
    gap: 60px;
  }

  .teaser-illustration {
    @media (min-width: $breakpoint_lg) {
      flex: 40%;
    }
  }
  
  .teaser-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    text-align: left;

    &.right {
      padding: 30px 30px 0 30px;

      @media (max-width: $breakpoint_md) {
        padding: 0 0 0 0;
      }

      @media (min-width: $breakpoint_lg) {
        padding: 30px 0 30px 50px;
      }
    }

    &.left {
      padding: 0 30px 30px 30px;

      @media (max-width: $breakpoint_md) {
        padding: 0 0 0 0;
      }

      @media (min-width: $breakpoint_lg) {
        padding: 30px 50px 30px 0;
      }
    }
    
    @media (min-width: $breakpoint_lg) {
      text-align: inherit;
      padding: 60px;
      flex: 60%;
    }
  }

  .icon-container {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    gap: 30px;

    .arrow {
      background-image: url("/static/svg/cms_plugins/arrow.svg");
      width: 52.4px;
      height: 30px;
    }
  }
}