@import "../../node_modules/bulma/sass/utilities/initial-variables"
@import "../../node_modules/bulma/bulma"

.channel-icon
    max-height: 64px

.video-thumbnail
    width: 100%

.video-grid
    $spacing: 0.5vw

    display: grid
    grid-row-gap: $spacing
    row-gap: $spacing
    grid-column-gap: $spacing
    column-gap: $spacing
    grid-template-columns: repeat(2, minmax(0, 1fr))
    grid-column: auto

    @include tablet
        grid-template-columns: repeat(3,minmax(0,1fr))

    @include desktop
        grid-template-columns: repeat(4,minmax(0,1fr))

    @include widescreen
        grid-template-columns: repeat(5,minmax(0,1fr))

    @include fullhd
        grid-template-columns: repeat(6,minmax(0,1fr))

.video-card
    display: flex
    flex-direction: column

.video-card-content
    padding: 0 0.5vw

    &:last-child
        padding-bottom: 0.5vw

// Fix almost invisible navbar items on mobile
.navbar-item
    color: #fff