.a-logo {}
.a-logo--video {
    padding: 36px 0 24px 0;

    svg {
        height: 100%;
    }
}

.a-logo__wrapper {
    height: 42px;
    text-align: center;
}

.a-video {}

.a-video__wrapper {
    padding-left: 0;
    padding-right: 0;
}

.a-video__player {}
.a-video__player__wrapper {}

.a-video__sidebar {
    padding: 0 20px 20px 20px;
}

.a-video__sidebar__wrapper {}

.a-video__sidebar__title {
    @include font("SOLEIL", 14px, 700, 17px, 30);
    box-shadow: inset 0 -0.25em 0 0 $white,
                inset 0 -0.65em 0 0 rgba($azure, 0.7);
    color: $sapphire;
    display: inline-block;
}

.a-video__sidebar__list {
    left: 20px;
    overflow-x: hidden;
    padding-bottom: 20px;
    right: 20px;
    top: 32px;
}

.a-video__playlist {
    margin: -8px -12px;
}

.a-video__playlist-item {
    display: inline-block;
    padding: 0 12px;
    margin: 8px 0;
    width: 100%;

    .c-card__images {
        &:after {
            @include font("SOLEIL", 10px, 400, 12px, 120);
            color: $white;
            content: "Now Playing";
            left: 50%;
            opacity: 0;
            position: absolute;
            text-transform: uppercase;
            top: 50%;
            transform: translate(-50%, -50%);
            transition-duration: 300ms;
            white-space: nowrap;
        }
    }

    .c-card__image {
        &:after {
            background-color: rgba($black, 0.25);
            bottom: 0;
            content: "";
            height: 100%;
            left: 0;
            opacity: 0;
            position: absolute;
            right: 0;
            top: 0;
            transition-duration: 300ms;
            width: 100%;
        }
    }

    &.is-active {
        .c-card__images {
            &:after {
                opacity: 1;
            }
        }

        .c-card__image {
            &:after {
                opacity: 1;
            }
        }
    }
}

.a-video__content-body {}

.a-video__ad {
    margin: 40px 0;
}


@include at-medium-size {
    .a-video__wrapper {
        padding-left: 0;
        padding-right: 0;
    }
}

@include at-x-large-size {
    .a-logo--video {
        padding: 48px 0;
    }
    .a-logo__wrapper {
        height: 60px;
    }
    .a-video__wrapper {
        padding-left: $DESKTOP_SIDE_GUTTER;
        padding-right: $DESKTOP_SIDE_GUTTER;
    }
    .a-video__ad {
        right: 80px;
    }
}