body {
    margin: 0;
    padding: 20px;
}

.filter-list {
    margin-bottom: 10px;
    /* Space below the filter list */
    padding: 5px;
    background-color: #f9f9f9;
    /* Light background for the filter list */
    border: 1px solid #ddd;
    /* Border around the filter list */
    border-radius: 4px;
    /* Rounded corners */
}

.filter-item {
    display: inline-block;
    background-color: #ffcccb;
    /* Soft pink background */
    border-radius: 3px;
    /* Rounded corners */
    padding: 2px 4px;
    /* Small padding for spacing */
    margin-right: 3px;
    /* Space between features */
    cursor: pointer;
    /* Change cursor to pointer */
}

.video-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 5px;
}

.video-item {
    border: 1px solid #ddd;
    overflow: hidden;
    /* Prevent overflow */
}

.cover {
    width: 100%;
    height: auto;
    /* Let height adjust based on width */
    aspect-ratio: 3 / 2;
    /* Maintain 3:2 aspect ratio */
    object-fit: contain;
    /* Ensure the entire image fits */
}

.info {
    padding: 5px;
    /* Reduced padding */
    font-size: 14px;
    /* Smaller font size */
    display: flex;
    /* Use flexbox for compact layout */
    flex-direction: column;
    /* Stack items */
}

.video-id {
    font-weight: bold;
    /* Bold for emphasis */
}

.info h2 {
    margin: 0;
    /* Remove default margin */
    display: inline;
    /* Display in-line */
}

.info p {
    margin: 2px 0;
    /* Minimal margin for paragraphs */
}

.feature {
    background-color: #ffcccb;
    /* Soft pink background */
    border-radius: 3px;
    /* Rounded corners */
    padding: 2px 4px;
    /* Small padding for spacing */
    margin-right: 3px;
    /* Space between features */
    font-weight: bold;
    /* Optional: make text bold */
    color: #333;
    /* Dark text color for contrast */
}