.section-index-galeri-video {
    .video-list>[class*="col-"] {
        display: flex;
    }

    .carddd {
        display: flex;
        flex-direction: column;
        width: 100%;
        border-radius: 15px;
        overflow: hidden;
        background-color: white;
        border: 1px solid #DFF1FF;
        position: relative;
        cursor: default;
        margin-bottom: 20px;


        &:hover {
            .content {
                .ikon {
                    color: var(--color-blue-700);
                }

                .title {
                    color: var(--color-blue-700);
                }
            }

            .thumbnail {
                .overlay {
                    opacity: 1;
                }
            }
        }

        .thumbnail {
            height: 362px;
            width: 100%;
            overflow: hidden;
            position: relative;

            iframe {
                width: 100%;
                height: 100%;
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .overlay {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background-color: rgba(51, 65, 85, 0.5);
                display: flex;
                justify-content: center;
                align-items: center;
                opacity: 0;
                transition: all ease-out 0.3s;


                .ikon {
                    font-size: var(--text-h2);
                    color: white;
                }
            }
        }

        .content {
            padding: 24px;
            cursor: pointer;
            display: flex;
            flex-grow: 1;
            min-height: 100px;

            a {
                display: flex;
                align-items: flex-start;
                gap: 16px;
                width: 100%;
                text-decoration: none;
            }

            .ikon {
                color: var(--text-muted);
                font-size: var(--text-h5);
                flex-shrink: 0;
                margin-top: 3px;
                transition: all ease-out 0.3s;
            }

            .title {
                font-size: var(--text-h6);
                color: var(--text-secondary);
                font-weight: bold;
                line-height: 130%;
                text-transform: none;
                margin-bottom: 0;
                transition: all ease-out 0.3s;

                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
        }
    }


}