.ybl-external-teaser{
    position: relative;
    max-width: 1340px;
    margin: 0 auto 100px;
    padding: 0 20px;
    @media only screen and (max-width: 900px){
        margin-bottom: 60px;
    }

    .ybl-external-teaser-wrapper{

        .ybl-external-head {
            &.icon-grid {
                display: grid;
                grid-template-columns: 40px 1fr;
                grid-column-gap: 16px;
                @media (max-width: 468px) {
                    grid-template-columns: 1fr;
                    grid-row-gap: 16px;
                }

                img.ybl-headline-icon {
                    width: 40px;
                    height: 40px;
                    @media (max-width: 468px) {
                        margin: 0 auto;
                        width: 64px;
                        height: 64px;
                        display: none;
                    }
                }
            }
            h2{
                margin: 0;
            }
        }
        .ybl-external-teaser-description{
            margin-bottom: 32px;
        }

      .brand-image-wrapper{
        position: relative;
        max-width: 180px;
        margin-bottom: 32px;

        .brand-image{
          width: 100%;
          height: auto;
        }
      }

        .ybl-external-teaser-collection{
            position: relative;

            .ybl-external-teaser-item{
                position: relative;
                display: grid;
                grid-template-columns: 344px 1fr;
                margin-bottom: 32px;
                box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.10);
                border-radius: 12px;

                @media only screen and (max-width: 768px) {
                    grid-template-columns: 1fr;
                }

                .ybl-teaser-image{
                    position: relative;
                    overflow: hidden;
                    min-height: 250px;
                    border-bottom-left-radius: 12px;
                    border-top-left-radius: 12px;

                    @media only screen and (max-width: 768px) {
                        border-bottom-left-radius: unset;
                        border-top-right-radius: 12px;
                    }
                    > img{
                         width: 100%;
                         height: 100%;
                         object-fit: cover;
                         position: absolute;
                         top: 0;
                         left: 0;
                     }
                }

                .ybl-teaser-content{
                    position: relative;
                    padding: 32px;

                    @media only screen and (max-width: 678px) {
                        padding: 16px;
                    }

                    h3, p{
                        padding: 0;
                        margin: 0;
                    }

                    h3{
                        margin-bottom: 16px;
                    }
                    p{
                        margin-bottom: 32px;
                    }
                    a.button{
                        margin-bottom: 0;
                        min-width: 220px;
                        margin-right: 0;
                        letter-spacing: 0.48px;

                        @media only screen and (min-width: 768px) {
                            float: right;
                        }
                        @media only screen and (max-width: 468px) {
                            min-width: unset;
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
}