.cpt-teasers-block {
    --cpt-gap: 1rem;
    min-width: 0;
}

.cpt-teaser-list {
    gap: var(--cpt-gap);
    align-items: stretch;
}

/* Untereinander */
.cpt-teasers-block.is-list .cpt-teaser-list {
    display: grid;
    grid-template-columns: 1fr;
}

/* Konfigurierbares Grid */
.cpt-teasers-block.is-grid .cpt-teaser-list {
    display: grid;
    grid-template-columns: repeat(var(--cpt-grid-columns, 3), minmax(0, 1fr));
}

/* Slider */
.cpt-teasers-block.is-slider .cpt-teaser-slider {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
}

.cpt-slider-viewport {
    min-width: 0;
    overflow: hidden;
}

.cpt-teasers-block.is-slider .cpt-teaser-list {
    display: flex;
    gap: var(--cpt-gap);
    transform: translate3d(0, 0, 0);
    transition: transform var(--cpt-slider-speed, 500ms) ease;
    will-change: transform;
}

.cpt-teasers-block.is-slider .cpt-teaser-item {
    flex: 0 0 calc(
        (100% - ((var(--cpt-slides-visible) - 1) * var(--cpt-gap))) /
        var(--cpt-slides-visible)
    );
}

.cpt-teaser-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cpt-teaser-image {
    display: block;
    overflow: hidden;
    margin-bottom: .75rem;
}

.cpt-teaser-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.cpt-teaser-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.cpt-teaser-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .6rem;
    margin-bottom: .45rem;
    font-size: .8rem;
    color: #777;
}

.cpt-teaser-title {
    display: block;
    font-weight: 600;
    text-decoration: none;
}

.cpt-teaser-excerpt {
    margin: .65rem 0 0;
    line-height: 1.5;
}

.cpt-teaser-acf-fields {
    display: grid;
    gap: .35rem;
    margin: .65rem 0 0;
}

.cpt-teaser-acf-field {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .4rem;
    margin: 0;
}

.cpt-teaser-acf-label {
    margin: 0;
    font-weight: 600;
}

.cpt-teaser-acf-label::after {
    content: ":";
}

.cpt-teaser-acf-value {
    margin: 0;
}

.cpt-slider-control {
    border: 1px solid #111;
    background: #111;
    color: #fff;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
}

.cpt-slider-control[hidden] {
    display: none !important;
}

.cpt-teasers-empty {
    padding: 1rem;
    border: 1px dashed #ccc;
}

@media (max-width: 900px) {
    .cpt-teasers-block.is-grid .cpt-teaser-list {
        grid-template-columns: repeat(var(--cpt-grid-columns-tablet, 2), minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .cpt-teasers-block.is-grid .cpt-teaser-list {
        grid-template-columns: 1fr;
    }

    .cpt-teasers-block.is-slider .cpt-teaser-slider {
        grid-template-columns: minmax(0, 1fr);
        row-gap: .75rem;
    }

    .cpt-teasers-block.is-slider .cpt-slider-viewport {
        grid-column: 1;
        grid-row: 1;
    }

    .cpt-teasers-block.is-slider .cpt-slider-control {
        grid-row: 2;
    }

    .cpt-slider-prev {
        grid-column: 1;
        justify-self: start;
    }

    .cpt-slider-next {
        grid-column: 1;
        justify-self: end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cpt-teasers-block.is-slider .cpt-teaser-list {
        transition-duration: 0ms !important;
    }
}