.component.title-carousel {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    padding: var(--logo-width);
}

.component.title-carousel.background {
    color: var(--white);
}

.component.title-carousel .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 25px;
    gap: 20px;
    padding: 0 80px 80px 80px;
}

.component.title-carousel .title .neue-haas {
    font-size: 50px;
    color: var(--red01);
    margin: 0;
}

.component.title-carousel.background .title .neue-haas {
    color: var(--white);
}

.component.title-carousel .title .arrow-button {
    align-self: center;
}

.component.title-carousel.background .title .arrow-button {
    border-color: var(--white);
    color: var(--white);
}

.component.title-carousel.background .title .arrow-button svg * {
    stroke: var(--white);
}

.component.title-carousel.background .title .arrow-button:hover {
    background: var(--white);
    color: var(--black);
}

.component.title-carousel.background .title .arrow-button:hover svg * {
    stroke: var(--black);
}

.component.title-carousel .owl-carousel .owl-stage {
    display: flex;
}

.component.title-carousel .owl-carousel .owl-item {
    display: flex;
    flex: 1 0 auto;
}

.component.title-carousel .owl-carousel .card {
    border-top: 1px solid var(--grey03);
    padding: 20px 0 0 0;
    color: var(--black);
    min-height: calc((1600px - 340px) / 3 * 1.15);
}

.component.title-carousel.background .owl-carousel .card {
    width:100%;
    color: var(--white);
    padding: 20px;
}
.component.title-carousel.background .owl-carousel .card[background="ffffff"]{
    color: var(--black);
}

.component.title-carousel.background .owl-carousel .card {
    /*border: 1px solid transparent;
    box-shadow: inset 0px 0px 0px 1px var(--white);*/
    border: 1px solid white;
}

.component.title-carousel.background .owl-carousel .card .more svg {
    stroke: var(--white);
}

.component.title-carousel.background .owl-theme .owl-dots .owl-dot span {
    border: 1px solid var(--white);
}

.component.title-carousel.background .owl-theme .owl-dots .owl-dot.active span,
.component.title-carousel.background .owl-theme .owl-dots .owl-dot:hover span {
    background: var(--white);
}

@media (max-width: 1600px) {
    .component.title-carousel .owl-carousel .card {
        min-height: calc((100vw - 340px) / 3 * 1.15);
    }
}

@media (max-width: 1280px) {
    .component.title-carousel {
        padding: 80px;
    }

    .component.title-carousel .title {
        padding: 0 40px 60px 40px;
    }

    .component.title-carousel .owl-carousel .card {
        min-height: calc((100vw - 185px) / 2 * 1.15);
    }
}

@media (max-width: 768px) {
    .component.title-carousel {
        padding: 40px;
    }

    .component.title-carousel .title {
        padding: 0 20px 40px 20px;
    }

    .component.title-carousel .title .neue-haas {
        font-size: 40px;
    }

    .component.title-carousel .owl-carousel .card {
        min-height: calc((100vw - 80px) * 1.15);
    }
}

@media (max-width: 480px) {
    .component.title-carousel {
        padding: 20px;
    }

    .component.title-carousel .title {
        padding: 0 0 40px 0;
    }

    .component.title-carousel .title .neue-haas {
        font-size: 30px;
    }

    .component.title-carousel .owl-carousel .card {
        min-height: calc((100vw - 40px) * 1.15);
    }
}