.thumbnail {
    width: 100%;
}

.video-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.video-info-grid {
    display: grid;
    grid-template-columns: 50px 1fr;
}

.thumbnail-row {
    margin-bottom: 8px;
    position: relative;
}

.video-author,
.video-stats {
    font-size: 12px;
    color: rgb(96, 96, 96);
}

.video-author {
    margin-bottom: 4px;
}

.video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 16px;
    row-gap: 16px;
}

/* For screens with a maximum width of 750px, display the grid with 2 columns */
@media (max-width: 750px) { 
    .video-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* For screens with a width between 751px and 999px, display the grid with 3 columns */
@media (max-width: 751px) and (min-width: 999px) { 
    .video-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* For screens with a minimum width of 1000px, display the grid with 4 columns */
@media (min-width: 1000px) {/* A screensize of 751-1000px will only have 3 columns in the grid */
    .video-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

.video-time {
    background-color: black;
    color: white;
    position: absolute;
    right: 5px;
    bottom: 10px;
    font-size: 12px;
    font-weight: bold;
    padding: 4px;
    border-radius: 2px;
}

.channel-link,
.video-link {
    text-decoration: none;
    color: inherit;
}

.profile-picture {
    width: 36px;
    border-radius: 50px;
}

.channel-picture {
    display: inline-block; /* Default inline behavior for consistency */
    position: relative; /* Required for positioning the tooltip */
}

.channel-picture img {
    display: block; /* Ensures profile picture stays properly aligned */
    margin: auto; /* Centers the image if necessary */
}

.channel-picture .channel-tooltip {
    position: absolute;
    top: 50%; /* Position the tooltip below the channel picture */
    left: 300%; /* Align the tooltip to the right of the channel picture */

    transform: translateX(-50%); /* Center-aligns the tooltip */
    display: grid;
    grid-template-columns: auto 1fr; /* Profile picture and text */
    gap: 10px; /* Adds spacing between profile picture and text */
    align-items: center;
    background-color: white; /* White background for the tooltip */
    border-radius: 8px; /* Rounded corners for the box */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for visibility */
    padding: 10px; /* Padding inside the tooltip */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease-in-out; /* Smooth fade-in */
    pointer-events: none; /* Prevent interaction when hidden */
    z-index: 300; /* Bring the tooltip above other elements */
    min-width: 200px; /* Ensures consistent size */
    white-space: nowrap; /* Prevents wrapping of text */

    pointer-events: none; /* Prevents the tooltip from being interactive */
    white-space: nowrap; /* Prevents the tooltip from wrapping */
}

.channel-picture:hover .channel-tooltip {
    opacity: 1; /* Show the tooltip on hover */
}

.channel-tooltip img {
    width: 50px; /* Adjust profile picture size inside tooltip */
    border-radius: 50%; /* Ensures the profile picture is circular */
}

.channel-tooltip .text-content {
    display: flex;
    flex-direction: column; /* Stack the name and subscriber count */
}

.channel-tooltip .text-content .video-author {
    font-size: 16px;
    font-weight: bold; /* Bold for channel name */
    margin: 0;
    color: black; /* Black color for channel name */
}

.channel-tooltip .text-content .num-of-subs {
    font-size: 12px;
    color: gray; /* Subtle color for subscriber count */
    margin: 2px 0 0 0; /* Minimal spacing */
}