.athletes-hero {
    position: relative;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    width: 100%;
    overflow: hidden;
}


/* Panel */

.athletes-hero__panel {
    position: relative;

    min-width: 0;
    min-height: clamp(500px, 50vw, 850px);

    margin: 0;
    overflow: hidden;
}


/* Hintergrundbild */

.athletes-hero__background {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* Farb-Overlay */

.athletes-hero__overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;
}


/* Logo */

.athletes-hero__caption {
    position: absolute;
    inset: 0;

    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: clamp(30px, 6vw, 100px);
}


.athletes-hero__logo {
    display: block;

    width: auto;
    max-width: min(60%, 450px);
    max-height: 180px;

    object-fit: contain;
}

.athletes-hero__connector {
    position: absolute;
    z-index: 10;

    top: 50%;
    left: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: clamp(150px, 15vw, 260px);
    aspect-ratio: 1;

    background: #000;
    border-radius: 50%;

    transform: translate(-50%, -50%);
}


.athletes-hero__ampersand {
    width: 58%;
    height: 58%;

    overflow: visible;
}


.athletes-hero__ampersand-path {
    fill: none;

    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 767px) {

    .athletes-hero {
        grid-template-columns: 1fr;
    }


    .athletes-hero__panel {
        min-height: 60vh;
    }


    .athletes-hero__connector {
        width: 130px;
    }


    .athletes-hero__logo {
        max-width: 65%;
        max-height: 130px;
    }

}