.stream-ctn {
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center;
}

.stream {
    width: calc(var(--ctn-width));
    height: calc(var(--ctn-width) / 16 * 9);
    margin-bottom: 2px;
    margin-right: 2px;
    position: relative;
    cursor: pointer;
}
.bilibili {
    width: 640px;
    height: 359px;
}

.stream-image {
    background-position: center;
    background-size: cover;
    position: absolute;
    background-color: rgba(255,255,255, 0.12);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition-duration: 0.2s; /* Safari */
    -moz-animation-duration: 0.2s;
    transition-duration: 0.2s;
}


@media (max-width: 900px) {
    .stream-ctn {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 500px) {
    .stream {
        width: calc(100vw);
        height: calc(100vw / 16 * 9);
    }
}

@media (max-width: 200px) {
    .stream {
        width: calc(200px);
        height: calc(200px / 16 * 9);
    }
}

.stream-btn {
    display: inline-block;
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center;
    margin-left: 1em;
    margin-right: 1em;
}

.stream-btn-ctn {
    margin-top: 2em;
}