.dtse-list {
    display: flex;
    flex-direction: column;
    gap: var(--dtse-row-gap, 28px);
}

.dtse-card {
    display: grid;
    grid-template-columns: var(--dtse-image-width, 260px) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--dtse-column-gap, 30px);
    min-height: var(--dtse-card-min-height, 300px);
    padding: var(--dtse-card-padding, 28px);
    overflow: hidden;
    position: relative;
    isolation: isolate;
    transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}

/*
 * NORMAL STATE: one Screen blend layer over the ENTIRE card.
 * This affects the background, circular image, title, description and link
 * together, matching a Figma layer filled with #005B75 + Blend Mode: Screen.
 */
.dtse-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    background: var(--dtse-screen-color, #005B75);
    mix-blend-mode: screen;
    opacity: 1;
    transition: opacity var(--dtse-transition, .65s) ease;
}

/* On hover reveal the untouched/original card UI. */
.dtse-card:hover::after {
    opacity: 0;
}

.dtse-image-wrap {
    width: var(--dtse-image-width, 260px);
    height: var(--dtse-image-height, 260px);
    border-radius: var(--dtse-image-radius, 50%);
    overflow: hidden;
    position: relative;
    flex: 0 0 auto;
    transform: scale(1);
    transform-origin: center center;
    transition: transform var(--dtse-transition, .65s) ease;
}

.dtse-image-wrap img,
.dtse-image-placeholder {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: none;
    filter: brightness(var(--dtse-brightness, 1)) saturate(var(--dtse-saturation, 1)) opacity(var(--dtse-opacity, 1));
    transition: filter var(--dtse-transition, .65s) ease;
}


/* Scale the whole circular image wrapper on card hover */
.dtse-card:hover .dtse-image-wrap {
    transform: scale(var(--dtse-hover-scale, 1.10));
}

/* Keep the image itself fixed; only its visual filters change */
.dtse-card:hover .dtse-image-wrap img,
.dtse-card:hover .dtse-image-placeholder {
    transform: none;
    filter: brightness(var(--dtse-hover-brightness, 1)) saturate(var(--dtse-hover-saturation, 1)) opacity(var(--dtse-hover-opacity, 1));
}


.dtse-image-placeholder {
    background: #dfe9eb;
}

.dtse-content {
    min-width: 0;
}

.dtse-title {
    margin: 0 0 6px;
    transition: color .3s ease;
}

.dtse-description {
    margin: 0;
    transition: color .3s ease;
}

.dtse-description p:last-child {
    margin-bottom: 0;
}

.dtse-link-wrap {
    align-self: start;
    padding-top: 8px;
}

.dtse-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .3s ease, gap .3s ease, transform .3s ease;
}

.dtse-link:hover {
    gap: 10px;
}

.dtse-link-icon {
    display: inline-flex;
    line-height: 1;
}


.dtse-empty {
    padding: 20px;
    text-align: center;
    background: #f5f5f5;
}

@media (max-width: 1024px) {
    .dtse-card {
        grid-template-columns: var(--dtse-image-width-tablet, 210px) minmax(0, 1fr);
    }

    .dtse-image-wrap {
        width: var(--dtse-image-width-tablet, 210px);
        height: var(--dtse-image-height-tablet, 210px);
    }

    .dtse-link-wrap {
        grid-column: 2;
        padding-top: 0;
    }
}

@media (max-width: 767px) {
    .dtse-card {
        grid-template-columns: 1fr;
        text-align: var(--dtse-mobile-align, left);
    }

    .dtse-image-wrap {
        width: var(--dtse-image-width-mobile, 180px);
        height: var(--dtse-image-height-mobile, 180px);
        justify-self: var(--dtse-mobile-image-align, center);
    }

    .dtse-link-wrap {
        grid-column: auto;
        justify-self: var(--dtse-mobile-link-align, start);
    }
}