.card-dock {
    background-attachment: fixed;
    background-position: center center;
    font-size: 0;
    padding: 18rem 5vw 14rem 5vw;
}

.single-card {
    box-sizing: border-box;
    display: inline-block;
    font-size: var(--font-body);
    padding: 0 2rem;
    margin-bottom: 4rem;
    vertical-align: top;
    width: 33.333%;
}

.single-card-wrapper {
    background-color: rgba(255, 255, 255, 0.95);
    box-sizing: border-box;
    padding: 3rem;
}

.card-dock-wrapper .single-card-description img {
    max-width: 100%;
    height: auto;
}

.card-video-button {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap;
    font-size: 0;
    margin-top: 2rem;
}

.card-video-button .play-button {
    box-sizing: border-box;
    color: var(--color-medium-gray);
    flex-basis: 12%;
    font-size: var(--font-body);
    margin-right: 2rem;
    transition: all 0.5s ease-out 0s;
}

.card-video-button .play-button svg {
    display: block;
    height: auto;
    transition: all 0.5s ease-in-out 0s;
    width: 100%;
}

.card-video-button .play-button .video-button-circle {
    fill: var(--color-medium-gray);
    transition: all 0.5s ease-out 0s;
}

.card-video-title {
    box-sizing: border-box;
    flex-basis: 88%;
    font-family: "Kievit Bold", sans-serif;
    font-size: var(--font-body-medium);
    line-height: 1.3;
}

.card-video-button:hover .play-button .video-button-circle {
    fill: var(--color-apex42-teal);
}

@media (max-width: 1200px) {
    .card-dock {
        padding-bottom: 14rem;
    }

    .single-card {
        margin-bottom: 4rem;
        width: 50%;
    }
}

@media (max-width: 767px) {
    .card-dock {
        padding: 6rem 5vw;
    }

    .single-card {
        display: block;
        margin-bottom: 4rem;
        width: 100%;
    }

    .single-card:last-child {
        margin-bottom: 0;
    }
}