.teaser-homepage-container {
    position: relative;

    & h2,
    & .h2,
    & h3,
    & .h3 {
        font-family: DaxWeb-Medi;
    }
}

.teaser-homepage-link {
    text-align: center;

    @media (min-width: 768px) {
        position: absolute;
        top: 2px;
        right: 1rem;
        text-align: right;
    }
}

.teaser-homepage {
    margin-bottom: 3rem;

    @media (min-width: 768px) {
        margin-right: -1.5rem;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 2rem;
    }
}

.teaser-homepage__first {
    border-left: 1px solid var(--abc-red);
    padding-left: 1.5rem;
    padding-right: 1.5rem;

    @media (min-width: 992px) {
        flex: 0 0 45%;
    }
}

.teaser-homepage__item {
    border-left: 1px solid var(--abc-red);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-bottom: 3rem;

    @media (min-width: 768px) {
        flex: 0 0 48%;
        margin-bottom: 0;
    }

    @media (min-width: 992px) {
        flex: 0 0 26%;
    }
}

.teaser-homepage__title {
    font-size: 1.31578947368rem;
    font-family: DaxWeb-Medi;
    margin-bottom: 2rem;
    color: var(--abc-font-color);
    display: block;

    @media (min-width: 992px) and (max-width: 1329.98px) {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* number of lines to show */
        line-clamp: 3;
        -webkit-box-orient: vertical;
        height: 6rem;
    }

    @media (min-width: 1330px) {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* number of lines to show */
        line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 4rem;
    }
}

.teaser-homepage__image {
    display: block;
    margin-bottom: 1.5rem;
    max-width: 32.5rem;
    transition: transform 0.2s ease-in-out;

    @media (min-width: 768px) {
        max-width: 100%;
    }

    &:hover {
        transform: scale(1.03);
    }

    & img {
        border-radius: 1rem;
    }
}

.teaser-homepage__category {
    font-size: 1rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
}

.teaser-homepage__link {
    font-size: 0.94736842105rem;
    display: block;
}
