#card-grid .splide__slide {
    position: relative;
    border-radius: 1rem !important;
    -webkit-border-radius: 1rem !important;
    -moz-border-radius: 1rem !important;
    -ms-border-radius: 1rem !important;
    -o-border-radius: 1rem !important;
    overflow: hidden;
}

#card-grid .splide__slide:not(.bg-none) {
    box-shadow: 0 0 1rem 0 rgba(0,0,0,0.1);
}

#card-slider {
    max-width: 100%;
    width: 100%;
}

#card-grid .splide__slide h3,
#card-grid .splide__slide h3 + div * {
    color: var(--color-off-black) !important;
}

#card-grid .splide__slide article.card.icon img {
    height: 4rem; 
    width: auto;
    margin-bottom: calc(var(--vert-spacing-3) * 1.2);
}

#card-grid .splide__slide article.card.img img {
    height: 15rem; 
    width: 100%;
    object-fit: cover;
}

#card-grid .splide {
    visibility: visible !important;
}

#card-grid .splide__track {
    position: relative;
    overflow: visible;
}

#card-grid h2,
#card-grid .intro {
    text-align: center;
    max-width: 45rem;
    margin-left: auto;
    margin-right: auto;
}

#card-grid .splide__slide > div {
    max-width: 100%;
}

#card-slider .splide__arrows,
#card-slider .splide__pagination {
    position: relative;
    display: flex;
}

#card-slider .splide__arrows button {
    position: relative;
    border-radius: none !important;
    -webkit-border-radius: none !important;
    -moz-border-radius: none !important;
    -ms-border-radius: none !important;
    -o-border-radius: none !important;
    background: unset !important;
    left: unset !important;
    right: unset !important;
    opacity: 1 !important;
}

#card-slider .splide__arrows button svg path {
    fill: var(--color-off-black);
}

.bg-off-black .splide__arrows button svg path,
.bg-metal #card-slider .splide__arrows button svg path {
    fill: var(--color-white) !important;
}

#card-slider .splide__pagination {
    flex-direction: row;
    width: 100%;
    bottom: unset !important;
    padding: 0 !important;
    justify-content: end;
}

#card-slider .splide__pagination button {
    height: 0.6rem !important;
    width: 0.6rem !important;
    background: var(--color-off-black) !important;
    opacity: 1 !important;
}

.bg-off-black #card-slider .splide__pagination button,
.bg-metal #card-slider .splide__pagination button {
    background: var(--color-white) !important;
}

#card-slider .splide__pagination button.is-active {
    background: var(--color-gold) !important;
}

#card-slider .slide-controls {
    gap: 1rem;
}

#card-grid .content {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}