.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.video-list-item {
    position: relative;
}

.video-list-item-image a {
    background-blend-mode: normal;
    background-position: 50%;
    background-size: cover;
    display: block;
    height: 100%;
    padding-bottom: 65%
}

.video-list-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    column-gap: 10px;
    row-gap: 10px;
    padding-bottom: 5px;
}

.videos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 10px;
    row-gap: 10px;
    padding-bottom: 15px;
}

.video-title {
    position: absolute;
    z-index: 999;
    color: #fff;
    background: rgba(0, 0, 0, .7);
    width: 100%;
    padding: 5px;
    font-size: 14px;
    text-transform: lowercase;
    max-height: 24px;
    line-height: 17px;
    overflow: hidden;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.stroke-dotted {
    opacity: 0;
    stroke-dasharray: 4, 5;
    stroke-width: 1px;
    transform-origin: 50% 50%;
    animation: spin 4s infinite linear;
    transition: opacity 1s ease,
    stroke-width 1s ease;
}

.stroke-solid {
    stroke-dashoffset: 0;
    stroke-dashArray: 300;
    stroke-width: 4px;
    transition: stroke-dashoffset 1s ease,
    opacity 1s ease;
}

.play-icon {
    transform-origin: 50% 50%;
    transition: transform 200ms ease-out;
}


#play:hover .stroke-dotted {
    stroke-width: 4px;
    opacity: 1;
}

#play:hover .stroke-solid {
    opacity: 0;
    stroke-dashoffset: 300;
}

#play:hover .play-icon {
    transform: scale(1.05);
}


#play {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 30%;
    height: 30%;
}

@media all and (max-width: 768px) {
    .videos {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media all and (max-width: 755px) {
    .bio-wrap
}

@media all and (max-width: 420px) {
    .videos {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media all and (max-width: 786px) {
    .video-list-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media all and (max-width: 420px) {
    .video-list-container {
        grid-template-columns: repeat(1, 1fr);
    }
}