.about-teaser .site-badge {
    grid-area: 1/1/span 7/span 5;
    max-width: 100%;
}

.about-teaser .title {
    grid-area: 1/5/1/span 3;
    margin-top: max(32px, 5.625vw);
    z-index: 1;
}

.about-teaser .name {
    grid-area: 2/5/2/span 3;
    z-index: 1;
}

.about-teaser .name::before {
    content: "";
    display: block;
    height: 2em;
    aspect-ratio: 1/1;
    mask: url(../../img/icon-check.svg) no-repeat center/contain;
    -webkit-mask: url(../../img/icon-check.svg) no-repeat center/contain;
    background: currentColor;
    z-index: 1;
}

.about-teaser .img-container {
    grid-area: 3/5/span 4/span 3;
    z-index: 1;
    justify-self: center;
    max-width: max(128px, 14.21875vw);
    aspect-ratio: 1/1;
    border-radius: 100%;
    z-index: 1;
}

.about-teaser .img-container img {
    border-radius: 100%;
}

.about-teaser .headline {
    grid-area: 2/8/span 2/span 3;
    z-index: 1;
}

.about-teaser .text-container {
    grid-area: 4/8/4/span 3;
    z-index: 1;
}

.about-teaser .btns-container {
    grid-area: 5/8/5/span 3;
    z-index: 1;
}

@media (max-width: 1199.98px) {
    .about-teaser .site-badge {
        align-self: center;
    }
    
    .about-teaser .title {
        grid-area: 1/4/1/span 3;
    }

    .about-teaser .name {
        grid-area: 2/4/2/span 3;
    }

    .about-teaser .img-container {
        grid-area: 3/4/span 5/span 4;
    }

    .about-teaser .headline {
        grid-area: 2/8/span 2/span 4;
    }

    .about-teaser .text-container {
        grid-area: 4/8/4/span 4;
    }

    .about-teaser .btns-container {
        grid-area: 5/8/5/span 4;
    }
}

@media (max-width: 991.98px) {
    .about-teaser .site-badge {
        grid-area: 1/1/span 7/span 7;
    }

    .about-teaser .title {
        grid-area: 1/3/1/span 4;
    }

    .about-teaser .name {
        grid-area: 2/3/2/span 4;
    }

    .about-teaser .img-container {
        grid-area: 3/3/span 5/span 4;
    }

    .about-teaser .headline {
        grid-area: 2/8/span 2/span 5;
    }

    .about-teaser .text-container {
        grid-area: 4/8/4/span 5;
    }

    .about-teaser .btns-container {
        grid-area: 5/8/5/span 5;
    }
}


@media (max-width: 767.98px) {
    .about-teaser {
        text-align: center;
    }

    .about-teaser .site-badge {
        grid-area: 1/2/span 3/span 7;
        align-self: flex-start;
        margin-top: var(--m-sm);
        max-width: 320px;
    }

    .about-teaser .title {
        grid-area: 1/2/1/span 12;
        margin-bottom: var(--m-xs);
    }

    .about-teaser .name {
        grid-area: 2/2/2/span 6;
        justify-self: flex-end;
        align-self: center;
    }

    .about-teaser .img-container {
        grid-area: 2/8/2/span 6;
    }

    .about-teaser .headline {
        grid-area: 3/2/3/span 12;
        max-width: 32ch;
        justify-self: center;
        margin-top: var(--m-sm);
    }

    .about-teaser .text-container {
        grid-area: 4/2/4/span 12;
        max-width: 48ch;
        justify-self: center;
    }

    .about-teaser .btns-container {
        grid-area: 5/2/5/span 12;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .about-teaser .title {
        grid-area: 2/2/2/span 12;
        margin-bottom: 0;
    }

    .about-teaser .img-container {
        grid-area: 1/2/1/span 12;
        margin-top: var(--m-lg);
        justify-self: center;
    }

    .about-teaser .name {
        grid-area: 3/2/3/span 12;
        justify-self: center;
    }

    .about-teaser .headline {
        grid-area: 4/2/4/span 12;
        margin-top: var(--m-md);
    }

    .about-teaser .text-container {
        grid-area: 5/2/5/span 12;
    }
    
    .about-teaser .btns-container {
        grid-area: 6/2/6/span 12;
    }
}