/* main content */
.videos-page-container {
    padding: 50px 0 100px;
    transition: padding 0.4s ease;
}
.videos-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: 16px;
         column-gap: 16px;
    row-gap: 24px;
    transition: row-gap 0.4s ease;
}
/* single item */
.videos-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--border1);
    border-radius: 16px;
    transition: border-color 0.4s ease, background-color 0.4s ease;
}
.videos-item:hover {
    border-color: var(--blue1);
    background: var(--blue2);
}
.videos-thumbnail {
    width: 100%;
    height: 250px;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    transition: height 0.4s ease;
}
.videos-thumbnail img,
.videos-thumbnail picture {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
.videos-item-inner {
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    transition: padding 0.4s ease;
}
.videos-date {
    color: var(--grey1);
    margin-bottom: 12px;
}
.videos-title {
    color: var(--black1);
    margin-bottom: 16px;
}
/* button */
.videos-controller {
    margin-top: auto;
}
/* Responsive */
@media (max-width: 1100px) {
     /* main content */
    .videos-list {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    /* main content */
    .videos-page-container {
        padding: 32px 0 75px;
    }
    .videos-list {
        row-gap: 16px;
    }
    /* single-item */
    .videos-item-inner {
        padding: 16px;
    }
}
@media (max-width: 550px) {
     /* main content */
    .videos-list {
        grid-template-columns: 1fr;
    }
    .videos-thumbnail {
        height: 200px;
    }
}