.teasercard-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.teasercard-image {
    position: relative;
    overflow: hidden;
}

.teasercard-image.hasimage::before {
    content: '';
    background: linear-gradient(182deg, rgba(0, 0, 0, 0) 1.92%, rgba(0, 0, 0, 0.40) 64.91%);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
}

.teasercard-image-link {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    ;
}

.teasercard-image-link a {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.teasercard-image-link a h4 {
	padding-right: calc(1.5 * var(--defaultunit));
	hyphens: auto;
}

.teasercard-image.noimage {
    aspect-ratio: 3 / 2;
    width: 100%;
    background-color: var(--color-yellow);
}

.teasercard-image.hasimage .teasercard-image-link a {
    color: var(--color-white);
}

.teasercard-image.hasimage img {
    transition: transform 0.2s ease;
}

.teasercard-image.hasimage:hover img {
    transition: transform 0.2s ease;
    transform: scale(1.2);
}

.teasercard-image-link-padder {
    display: flex;
    height: 100%;
    align-items: flex-end;
    padding: var(--defaultunit) calc(1 * var(--defaultunit));
    box-sizing: border-box;
}

@media (min-width:769px) and (max-width: 1600px) {
    .teasercard-image-link-padder {
        padding: calc(0.5 * var(--defaultunit)) calc(0.5 * var(--defaultunit));
    }
}

.teasercard-content {
    background-color: var(--color-ultralightgrey);
    padding: var(--defaultunit);
    flex: 1;
}

@media (min-width:769px) and (max-width: 1600px) {
    .teasercard-content {
        padding: calc(0.5 * var(--defaultunit));
    }
}



.teasercard-image.hasimage .teasercard-image-link-padder {
    background: url(../../../Icons/arrow_teaser.svg) calc(100% - var(--defaultunit)) calc(100% - var(--defaultunit)) no-repeat;
    background-size: calc(1 * var(--defaultunit)) auto;
    transition: background-position 0.2s ease;
}

.teasercard-image.hasimage:hover .teasercard-image-link-padder {
    background: url(../../../Icons/arrow_teaser.svg) calc(100% - var(--defaultunit) * 0.7) calc(100% - var(--defaultunit)) no-repeat;
    background-size: calc(1 * var(--defaultunit)) auto;
    transition: background-position 0.2s ease;
}

@media (min-width:769px) and (max-width: 1600px) {
    .teasercard-image.hasimage .teasercard-image-link-padder {
        background: url(../../../Icons/arrow_teaser.svg) calc(100% - 0.5 * var(--defaultunit)) calc(100% - 0.5 * var(--defaultunit)) no-repeat;
        background-size: calc(1 * var(--defaultunit)) auto;
    }

    .teasercard-image.hasimage:hover .teasercard-image-link-padder {
        background: url(../../../Icons/arrow_teaser.svg) calc(100% - 0.5 * var(--defaultunit) * 0.7) calc(100% - 0.5 * var(--defaultunit)) no-repeat;
        background-size: calc(1 * var(--defaultunit)) auto;
    }

}


@media (max-width: 768px) {
    .teasercard-image.hasimage .teasercard-image-link-padder {
        background-size: calc(1.5 * var(--defaultunit)) auto;
    }

    .teasercard-image.hasimage:hover .teasercard-image-link-padder {
        background-size: calc(1.5 * var(--defaultunit)) auto;
    }
}