.ds-uc {
    --background_color: var(--Transparent);
    --text_color: var(--Neutral-900);
    --link_color:  var(--text_color);

    --card_background_color: var(--Neutral-100);
    --card_title_color: var(--text_color);
    --card_hint_color: var(--text_color);

    --badge_border_color: var(--text_color);
    --badge_background_color: transparent;
    --badge_text_color: var(--text_color);

    --carousel_button_fill: var(--Global-Golf-Blue);

    background-color: var(--background_color);
}

.c-ds.ds-uc {
    color: var(--text_color);
}

.c-ds.ds-uc a {
    color: var(--link_color);
}

.c-ds.ds-uc .ds-section-title {
    color: var(--title_color);
}

.ds-uc .ds-embla {
    --slide-spacing: 1.5rem;
    --slide-size: calc(100% - var(--slide-spacing) * 2);

    position: relative;

    margin-inline: calc(var(--ds-gutter-x) * .5 * -1);
}

.ds-uc .ds-embla-wrap {
	display: flex;
	flex-direction: column;
}

.ds-uc-btn-wrapper {
	order: -1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 2rem;
}

.ds-uc .ds-embla__container {
    padding: 0;
    margin-block: 0;

    list-style-type: none;
}

.ds-uc .ds-embla__slide {
    max-width: calc(18.5rem + var(--slide-spacing));
}

.ds-uc .ds-embla-btn {
    padding: 0.5rem;
}

.ds-uc .ds-embla-btn svg {
    width: 2rem;
    height: 2rem;
    vertical-align: top;

    border-radius: 50%;
}

.ds-uc .ds-embla-btn svg path {
    fill: var(--carousel_button_fill);
}

.ds-use-cases {
	overflow: hidden;
}

.ds-uc-card {
    --border_radius: 0.75rem;

    background: var(--card_background_color);
    border-radius: var(--border_radius);

    padding: 1.5rem;

    height: 100%;

    color: var(--card_title_color);

		transition: all 0.3s ease;
}

.ds-uc-card-link {
		position: absolute;
		width: 100%;
		height: 100%;
		inset: 0;

		z-index: 1;
}

.ds-uc-card-badge {
    display: inline-block;
    vertical-align: top;

    margin-block-end: 1rem;

    font-size: 0.875rem;
    line-height: 1.71428571;
    letter-spacing: 2%;
		font-weight: 600;

    padding: 0.25rem 0.5rem;

    border-radius: 0.75rem;
    border: 0.0625rem solid var(--badge_border_color);

    background-color: var(--badge_background_color);
    color: var(--badge_text_color);

		transition: all 0.3s ease;
}

.ds-uc-card-thumb {
    margin-block-end: 1.5rem;
}

.ds-uc-card .ds-uc-card-title {
    font-family: var(--ds-font-content);
}

.ds-uc-card-title {
    margin-block: 0;

    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.71428571;
    letter-spacing: 0.018rem;

    padding-block: 0.25rem;

    color: var(--card_title_color);

		transition: all 0.3s ease;
}

.ds-uc-card-hint {
    font-size: 0.875rem;
    line-height: 1.714;
    letter-spacing: 0.015rem;
		font-weight: 300;

    margin-block-start: 0.5rem;

    color: var(--card_hint_color);

		transition: all 0.3s ease;
}

.ds-uc .ds-embla__slide.is-active .ds-uc-card {
	background: var(--card_background_color_active, var(--card_background_color));
	color: var(--card_title_color_active, var(--card_title_color));
}

.ds-uc .ds-embla__slide.is-active .ds-uc-card-title {
	color: var(--card_title_color_active, var(--card_title_color));
}

.ds-uc .ds-embla__slide.is-active .ds-uc-card-badge {
	border-color: var(--badge_border_color_active, var(--badge_border_color));
	background-color: var(--badge_background_color_active, var(--badge_background_color));
	color: var(--badge_text_color_active, var(--badge_text_color));
}

.ds-uc .ds-embla__slide.is-active .ds-uc-card-hint {
	color: var(--card_hint_color_active, var(--card_hint_color));
}

.ds-uc .ds-embla__slide .ds-uc-card:hover {
	background: var(--card_background_color_hover, var(--card_background_color));
	color: var(--card_title_color_hover, var(--card_title_color));
}

.ds-uc .ds-embla__slide .ds-uc-card:hover .ds-uc-card-title {
	color: var(--card_title_color_hover, var(--card_title_color));
}

.ds-uc .ds-embla__slide .ds-uc-card:hover .ds-uc-card-badge {
	border-color: var(--badge_border_color_hover, var(--badge_border_color));
	background-color: var(--badge_background_color_hover, var(--badge_background_color));
	color: var(--badge_text_color_hover, var(--badge_text_color));
}

.ds-uc .ds-embla__slide .ds-uc-card:hover .ds-uc-card-hint {
	color: var(--card_hint_color_hover, var(--card_hint_color));
}

@media (max-width:992px) {
	.ds-uc-card-title {
		font-size: 1rem;
		line-height: 1.5;
	}

}

@media (min-width:992px) {
	.ds-uc-btn-wrapper {
		margin-bottom: 0;
	}
	.ds-embla-wrap {
        position: relative;
    }

		.ds-uc .ds-embla {
        --slide-spacing: 2.5rem;
        width: 100%;

        margin-inline:auto;

        -webkit-mask-image: linear-gradient(to right,#000 calc(100% - 5.1rem),transparent calc(100% - 0px));
        mask-image: linear-gradient(to right,#000 calc(100% - 5.1rem),transparent calc(100% - 0px));
    }

    .ds-uc .ds-embla__viewport {
        -webkit-mask-image: linear-gradient(to left,#000 calc(100% - 5.1rem),transparent calc(100% - 0px));
        mask-image: linear-gradient(to left,#000 calc(100% - 5.1rem),transparent calc(100% - 0px));
    }

		.ds-uc .ds-embla-btn {
        --btn_offset: 0.5rem;

        position: absolute;

        display: inline-block;

        z-index: 10;

        inset-block-start: 50%;
				transform: translateY(-50%);
    }

    .ds-uc .ds-embla-btn.-prev- {
        inset-inline-start: var(--btn_offset);
    }

    .ds-uc .ds-embla-btn.-next- {
        inset-inline-end: var(--btn_offset);
    }
}

@media (min-width:1200px) {
    .ds-uc .ds-embla__slide {
        max-width: calc(20rem + var(--slide-spacing));
    }
}

@media (min-width: 1400px) {
    .ds-uc .ds-embla-btn {
        --btn_offset: -3.125rem;
    }
		.ds-uc .ds-embla-wrap {
			max-width: calc(100vw - 10rem);
			width: calc(100% + 10rem);
			position: relative;
			left: 50%;
			transform: translateX(-50%);
		}
}

@media (min-width: 1600px) {
		.ds-uc .ds-embla {
        --slide-spacing: 2.5rem;

        margin-inline:auto;

        -webkit-mask-image: linear-gradient(to right,#000 calc(100% - 8.1rem),transparent calc(102% - 0px));
        mask-image: linear-gradient(to right,#000 calc(100% - 8.1rem),transparent calc(102% - 0px));
    }

    .ds-uc .ds-embla__viewport {
        -webkit-mask-image: linear-gradient(to left,#000 calc(100% - 8.1rem),transparent calc(102% - 0px));
        mask-image: linear-gradient(to left,#000 calc(100% - 8.1rem),transparent calc(102% - 0px));
    }

    .ds-uc .ds-embla-btn {
        --btn_offset: -3rem;
    }

		.ds-uc .ds-embla-wrap {
				width: calc(100% + 16rem);
				max-width: calc(100vw - 16rem);
    }
}