:root {
    --cb-teaserelement-default-bg-color: #FFFFFF;
    --cb-teaserelement-font-calc-value: 59;
}
.cb-teaserelement {
    --cb-teaserelement-font-color: lch(from var(--cb-teaserelement-columns-bg) calc((var(--cb-teaserelement-font-calc-value) - l) * infinity) 0 0);
    --cb-teaserelement-content-gap: clamp(40.3125rem,14.6591rem + 24.4318vw , 53.75rem);
    --cb-teaserelement-arrow-color: var(--cb-teaserelement-font-color);
    --cb-teaserelement-content-padding: 50px;

    .no-row-gap {
        row-gap: 0;
    }

    > div {
        position: relative;

        &:hover {
            .hf-image-wrapper {
                img {
                    transform: scale(1.05);
                }
            }

            svg {
                margin-left: 30px;
            }
        }
    }

    .hf-image-wrapper {
        overflow: hidden;

        picture {
            height: 100%;
            display: flex;
        }

        img {
            object-position: center;
            object-fit: cover;
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.4s ease;
        }
    }

    .cb-teaserelement-noimage {
        background-color: var(--cb-teaserelement-columns-bg);
    }

    .cb-teaserelement-content {
        gap: clamp(30px, 0.2458rem + 4.2373vw, 60px);
        background-color: var(--cb-teaserelement-columns-bg);
        color: var(--cb-teaserelement-font-color);
        padding: clamp(30px, 0.2458rem + 4.2373vw, 60px);
        height: 100%;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;

        h3 {
            color: inherit;
            margin: 0;
        }

        svg {
            transition: margin-left 0.4s ease;
            > path {
                fill: var(--cb-teaserelement-arrow-color);
            }
        }
    }

    @media screen and (min-width: 769px) {
        .round-corners {
            .hf-image-wrapper {
                border-radius: var(--cb-teaserelement-content-padding) 0 0 var(--cb-teaserelement-content-padding);
            }

            .cb-teaserelement-content {
                border-radius: 0 var(--cb-teaserelement-content-padding) var(--cb-teaserelement-content-padding) 0;
            }

            &.revert-order {
                .hf-image-wrapper {
                    border-radius: 0 var(--cb-teaserelement-content-padding) var(--cb-teaserelement-content-padding) 0;
                }
                .cb-teaserelement-content {
                    border-radius: var(--cb-teaserelement-content-padding) 0 0 var(--cb-teaserelement-content-padding)  ;
                }
            }
        }

        .hf-image-wrapper {
            background-color: var(--cb-teaserelement-columns-bg);
        }

        .revert-order {
            > [class*="col-"]:first-child {
                order: 1;
            }
        }

    }
}

#maincontent > .cb-teaserelement:nth-of-type(even) {
    [class*="col-"]:first-child {
        order: 1;
    }
    .round-corners {
        .hf-image-wrapper {
            border-radius: 0 50px 50px 0;
        }

        .cb-teaserelement-content {
            border-radius: 50px 0 0 50px;
        }
    }
}