.videos {
    padding: 0 1.5rem 1rem 1.5rem ;
}

.videos-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10em, 25em));
    justify-content: center;
    align-content: center;
    gap: 1rem;
}

.section-title {
    text-align: center;
}

.video {
    overflow: hidden;
    box-shadow: 0 0 2px 2px #7D8A9B;
    border-radius: 2px;
}

.video-link {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    text-decoration: none;
}

.video-link:hover {
    filter: contrast(120%);
}

.video-thumbnail {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    width: 100%;
}

.video-play-icon {
    grid-column: 2 / 2;
    grid-row: 2 / 2;
    content: url(/pictures/icons/play-icon.png);
    align-self: center;
    justify-self: center;
    opacity: 75%;
}

.video-title, .video-subtitle {
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    align-self: center;
}

.video-title {
    grid-column: 1 / -1;
    grid-row: 1 / 1;
    font-size: 2rem;
}

.video-subtitle {
    grid-column: 1 / -1;
    grid-row: 3 / 3;
    font-size: 1rem;
}