@media screen and (min-width: 600px) {
    .vsource {
        width: 100%;
        height: 96px;
        margin-bottom: 20px;
    }

    .vsource-image {
        height: 96px;
        width: 160px;
        float: left;
        border-radius: 6px;
    }

    .vsource-title {
        float: right;
        text-align: left;
        width: calc(100% - 180px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: 16px;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .vsource-author-profile {
        width: 24px;
        height: 24px;
        border-radius: 12px;
        margin-left: 20px;
        float: left;
    }

    .vsource-author {
        float: left;
        margin: 2.5px;
        margin-left: 20px;
        width: calc(100% - 180px - 20px - 10px - 24px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: 300;
        font-size: 14px;
    }

    .username:before {
        content: '@';
    }

    .views:after {
        content: ' views';
    }

    .vsource-author span {
        margin-right: 4px;
        margin-left: 4px;
    }

    .vsource-author span:first-child {
        margin-right: 4px;
        margin-left: 0px;
    }
}

@media screen and (max-width: 600px) {
    .vsource {
        width: 100%;
    }

    .vsource-image {
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
    }

    .vsource-title {
        text-align: left;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: 16px;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .vsource-author-profile {
        width: 24px;
        height: 24px;
        border-radius: 12px;
        float: left;
    }

    .vsource-author {
        float: left;
        margin: 2.5px;
        margin-left: 0px;
        width: calc(100% - 44px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: 300;
        font-size: 14px;
        margin-bottom: 25px;
    }

    .vsource:last-child .vsource-author {
        margin-bottom: 65px;
    }

    .username:before {
        content: '@';
    }

    .views:after {
        content: ' views';
    }

    .vsource-author span {
        margin-right: 4px;
        margin-left: 4px;
    }

    .vsource-author span:first-child {
        margin-right: 4px;
        margin-left: 0px;
    }
}

#vsources-loading {
    text-align: center;
    margin-bottom: 30px;
}

#vsources-loading p {
    text-align: center;
    padding-top: 8px;
}

.author a {
    color: var(--hard-emphasis);
    text-decoration: none;
}

.author a:hover {
    text-decoration: underline;
}

.no-vsources {
    padding-bottom: 0px;
}

.no-vsources-list {
    padding-top: 0px;
}

.video-desc p {
    text-align: justify;
}

.video-desc {
    padding-top: 8px;
    padding-bottom: 24px;
}