/* Default: Applies to desktops and larger screens */
.grid-width {
    width: 40%;
}

/* Mobile: Applies to screens with a max width of 768px */
@media (max-width: 768px) {
    .grid-width {
        width: 100%; /* Full width for mobile devices */
    }
}

/* Tablet: Optional, for screens between mobile and desktop */
@media (min-width: 769px) and (max-width: 1024px) {
    .grid-width {
        width: 60%; /* Adjust as needed for tablets */
    }
}


.rounded-none{
    border-radius: 0px;	
    }
    .rounded-sm{
    border-radius: 0.125rem;
    }
    .rounded{
    border-radius: 0.25rem;
    }
    .rounded-md{
    border-radius: 0.375rem;}
    .rounded-lg{
    border-radius: 0.5rem;
    }
    .rounded-xl{
    border-radius: 0.75rem;
    }
    .rounded-2xl{
    border-radius: 1rem;
    }
    .rounded-3xl{
    border-radius: 1.5rem;
    }
    
    /* Thumbnail Start */
    
    .thumbnail-container {
        position: relative;
        display: inline-block;
        width: fit-content;
    }
    
    .thumbnail {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 0.5rem;
    }
    
    .play-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 3rem;
        color: white;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }
    
    .thumbnail-container:hover .play-icon {
        opacity: 1;
    }
    
    .thumbnail-container:hover .thumbnail {
        filter: brightness(0.7);
    }
    /* Thumbnail End */

    .table-header-w{
        width: 100px;
        text-align: left;
    }
    .table-header-w-1{
        width: 130px;
        text-align: left;
    }
    .table-header-w-2{
        width: 150px;
        text-align: left;
    }