.overlayed-image {
    z-index: 3;
}

.overlayed-image--hero {
    position: absolute;
    max-width: 360px;
    left: 50%;
    top: 100%;
    transform: translate(-50%, calc(17% - 0px));

    @media (min-width: 979px) {
        left: auto;
        right: 0;
        width: 20rem;
        max-width: 100%;
        transform: translate(0%, calc(-32% + 7px));
        grid-column: auto;
    }

    @media (min-width: 1440px) {
        width: 38rem;
        transform: translate(0%, calc(-43% + 12px));
    }
}

.overlayed-image--text-image-left {
    position: relative;
    order: 2;
    margin-bottom: -11rem;
    width: 100%;
    max-width: 360px;
    grid-column: span 2;
    left: 50%;
    transform: translate(-50%, -7px);

    @media (min-width: 979px) {
        order: 1;
        position: absolute;
        left: 0;
        top: 100%;
        max-width: 24rem;
        transform: translate(0%, calc(-54% + 2px));
        grid-column: auto;
    }

    @media (min-width: 1440px) {
        max-width: 35rem;
        top: 100%;
        transform: translate(0%, calc(-48% + 1px));
    }
}

.overlayed-image--teaser {
    position: relative;
    order: 2;
    margin-bottom: -13rem;
    width: 100%;
    max-width: 360px;
    grid-column: span 2;
    left: 50%;
    transform: translate(-50%, -1px);

    @media (min-width: 979px) {
        order: 1;
        left: auto;
        position: absolute;
        right: 0;
        top: 100%;
        max-width: 24rem;
        transform: translate(0%, calc(-55% + 4px));
        grid-column: span 1;
    }

    @media (min-width: 1440px) {
        max-width: 35rem;
        top: 100%;
        transform: translate(0%, calc(-50% + 5px));
    }
}


.overlayed-image--shedule {
    position: relative;
    order: 2;
    margin-bottom: -13rem;
    width: 100%;
    max-width: 360px;
    grid-column: span 2;
    left: 50%;
    transform: translate(-50%, -1px);

    @media (min-width: 979px) {
        order: 1;
        position: absolute;
        left: 0;
        top: 100%;
        max-width: 22rem;
        transform: translate(0%, calc(-55% + 4px));
        grid-column: auto;
    }

    @media (min-width: 1440px) {
        max-width: 28rem;
        transform: translate(0%, calc(-46% + 5px));
    }
}


.overlayed-image--price-teaser {
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 360px;
    grid-column: span 2;
    left: 50%;
    transform: translate(-50%, -50%);

    @media (min-width: 979px) {
        left: 0;
        max-width: 26rem;
        transform: translate(0%, calc(-55% + 4px));
        grid-column: span 1;
    }

    @media (min-width: 1440px) {
        max-width: 33rem;
        transform: translate(0%, -50%);
    }
}