.ds-bg {
    --background_color: var(--Transparent);
    --text_color: var(--Neutral-900);
    --link_color:  var(--text_color);

    --card_background_color: var(--Neutral-200);
    --card_text_color: var(--text_color);

    background-color: var(--background_color);
}

.c-ds.ds-bg {
    color: var(--text_color);
}

.c-ds.ds-bg a {
    color: var(--link_color);
}

.c-ds.ds-bg .ds-section-title {
    color: var(--text_color);
}

.ds-bg .ds-section-title {
    margin-block-end: 1rem;
		color: var(--title_color);

    text-align: start;
}

.ds-bg .ds-section-title--left {
		text-align: left;
}

.ds-bg .ds-section-title--center {
		text-align: center;
}

.ds-bg .ds-section-title--right {
		text-align: right;
}

.ds-bg-card {
    position: relative;

    display: block;
    border-radius: 0.5rem;
    overflow: hidden;

    padding: 1rem;

    background-color: var(--card_background_color);

    font-size: 1.37500rem;
    line-height: 137%;
		font-weight: 300;
    letter-spacing: 0.0125rem;

    text-decoration: none;
}

.ds-bg-card-label {
    position: relative;
    z-index: 5;
		font-weight: 600;
		line-height: 1.1818;
}

.ds-bg-card-cover,
.ds-bg-card-cover img {
    pointer-events: none;

    position: absolute;
    z-index: 3;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.c-ds.ds-bg .ds-bg-card {
    color: var(--card_text_color);
}

.ds-bg .ds-bg-card {
    min-height: 10rem;
}

.ds-bg-grid {
    display: grid;
    gap: 1rem;

    grid-template-columns: 1fr 1fr;
}

.ds-bg--one .ds-bg-grid {
    grid-template-rows: 10rem 10rem 10rem;
}

.ds-bg--one .ds-bg-grid .ds-bg-card:nth-child(2) {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 2;
}

.ds-bg--one .ds-bg-grid .ds-bg-card:nth-child(3) {
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 1;
}

.ds-bg--three .ds-bg-grid  .ds-bg-card:nth-child(3) {
    grid-column-start: 1;
    grid-column-end: -1;
}

.ds-bg-card:hover {
    text-decoration: none;
}

@media (min-width:1200px) {
    .ds-bg .ds-section-title {
        margin-block-end: 2.5rem;
    }

		.ds-bg-card-label {
			font-weight: 600;
			line-height: 1.21428571;
		}

    .ds-bg .ds-bg-grid {
        grid-template-columns: 22.4375rem 1fr 22.4375rem;
        grid-template-rows: 20.9375rem 20.9375rem;
    }

    .ds-bg--one .ds-bg-grid .ds-bg-card:nth-child(2) {
        grid-column-start: 2;
        grid-column-end: -1;
        grid-row-start: 1;
        grid-row-end: 1;
    }

    .ds-bg--one .ds-bg-grid .ds-bg-card:nth-child(3) {
        grid-row-start: 2;
        grid-row-end: -1;
        grid-column-start: 1;
        grid-column-end: 3;
    }

    .ds-bg--two .ds-bg-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .ds-bg--two .ds-bg-grid .ds-bg-card:nth-child(4) {
        grid-column-start: 1;
        grid-column-end: -1;
    }

    .ds-bg--three .ds-bg-grid .ds-bg-card:nth-child(2) {
        grid-column-start: 2;
        grid-column-end: -1;
    }

    .ds-bg-card {
        padding: 2.5rem 1.6875rem;

        font-size: 1.75rem;
        line-height: 1.21428571;
        letter-spacing: 0.0138rem;
    }
}


