.home-page {
    width: 100%;
}


.home-page .video-grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(
        3,
        minmax(0, 1fr)
    );

    gap: 24px;
}


/*
|--------------------------------------------------------------------------
| Collapsed Sidebar - Desktop
|--------------------------------------------------------------------------
*/

body.sidebar-collapsed .home-page .video-grid {
    grid-template-columns: repeat(
        4,
        minmax(0, 1fr)
    );
}


/*
|--------------------------------------------------------------------------
| Desktop spacing
|--------------------------------------------------------------------------
*/

@media (min-width: 1201px) {

    .home-page {
        padding-bottom: 30px;
    }

}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .home-page {
        padding-bottom: 20px;
    }

    .home-page .video-grid {
        grid-template-columns: repeat(
            2,
            minmax(0, 1fr)
        );

        gap: 18px;
    }

    body.sidebar-collapsed .home-page .video-grid {
        grid-template-columns: repeat(
            2,
            minmax(0, 1fr)
        );
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .home-page {
        padding-bottom: 10px;
    }

    .home-page .video-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    body.sidebar-collapsed .home-page .video-grid {
        grid-template-columns: 1fr;
    }

}