.service-with-links-and-video-slider {
    .row {
        --bs-gutter-x: 80px;
        --bs-gutter-y: 80px;

        @media screen and (max-width: 991px) {
            --bs-gutter-x: 40px;
            --bs-gutter-y: 40px;
        }
    }
    .left-col {
        &.service-item {
            .service-card {
                height: 100%;
                display: flex;
                flex-direction: column;
                
                .service-icon {
                    height: 60px;
                    margin-bottom: 25px;

                    @media screen and (max-width: 768px) {
                        height: 40px;
                        margin-bottom: 20px;
                    }
                    img {
                        width: auto;
                        height: 100%;
                    }
                }
                .service-heading {
                    p {
                        font-weight: 800;
                        text-transform: uppercase;
                        letter-spacing: 3px;
                        margin-bottom: 12px;

                        @media screen and (max-width: 768px) {
                            font-size: 2.4rem;
                            letter-spacing: 2px;
                        }
                    }
                }
                .service-text {
                    * {
                        margin-bottom: 2rem;

                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                    a {
                        color: var(--color-white);
                        text-decoration: underline;
                        text-underline-offset: 2px;

                        &:hover, &:focus-visible {
                            color: var(--color-accent);
                            text-decoration: none;
                        }
                    }
                }
                .articles {
                    margin-top: var(--spacing-xl);

                    @media screen and (max-width: 576px) {
                        margin-top: var(--spacing-lg);
                    }
                    .row {
                        --bs-gutter-x: 20px;
                    }
                    .article {
                        display: flex;
                        flex-direction: column;

                        .article-image {
                            width: 120px;
                            height: 84px;
                            border-radius: 30px;
                            overflow: hidden;
                            margin-bottom: 2rem;
                            
                            a {
                                display: block;
                                width: 100%;
                                height: 100%;

                                &:hover, &:focus-visible {
                                    img {
                                        transform: scale(1.1);
                                    }
                                }
                            }
                            img {
                                display: block;
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                transition: .5s ease;
                            }
                        }
                        .article-title {
                            font-size: 1.6rem;
                            line-height: 1.5;

                            a {
                                color: var(--color-white);
                                
                                &:hover, &:focus-visible {
                                    text-decoration: underline;
                                }
                            }
                        }
                        .read-link {
                            font-size: 1.8rem;
                            padding-top: 2rem;
                            margin-top: auto;

                            @media screen and (max-width: 1199px) {
                                padding-top: 1rem;
                            }
                            @media screen and (max-width: 991px) {
                                padding-top: 2rem;
                            }
                            @media screen and (max-width: 576px) {
                                padding-top: 1rem;
                            }
                            a {
                                position: relative;
                                display: inline;
                                padding-right: 25px;
                                color: var(--color-white);

                                &:hover, &:focus-visible {
                                    &:after {
                                        right: -4px;
                                    }
                                }
                                &:after {
                                    content: '';
                                    position: absolute;
                                    width: 18px;
                                    height: 15px;
                                    background-image: url('../../../assets/svg/arrow-right-green-alt.svg');
                                    background-size: cover;
                                    background-repeat: no-repeat;
                                    top: 50%;
                                    right: 0;
                                    transform: translateY(-50%);
                                    transition: .2s ease-in-out;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .right-col {
        .video-wrapper {
            margin-bottom: 2rem;
            
            .plyr {
                border-radius: 30px;

                @media screen and (max-width: 576px) {
                    border-radius: 20px;
                }
            }
            .plyr__control--overlaid {
                padding: 25px;

                @media screen and (max-width: 576px) {
                    padding: 20px;
                }
                svg {
                    width: 25px;
                    height: 25px;

                    @media screen and (max-width: 576px) {
                        width: 20px;
                        height: 20px;
                    }
                }
            }
        }
        .now-playing {
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 3px;
            color: var(--color-primary);
            text-align: center;

            @media screen and (max-width: 768px) {
                font-size: 2.4rem;
                letter-spacing: 2px;
            }
        }
        .video-description {
            text-align: center;
            margin-bottom: 0;
        }
    }
}