.trailer-buttons {
    display: flex; /* Arrange buttons side-by-side */
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

.trailer-button {
    padding: 10px 15px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: bold;
    display: inline-flex;
    align-items: flex-end;
    gap: 5px;
}

.trailer-button.active,
.trailer-button:hover {
    background-color: #000;
    color: white;
    border-color: #000;
}

.trailer-icon {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyMHB4IiBmaWxsPSIjMDAwIj48cGF0aCBkPSJNMTkyLTE0NHYtNjcyaDcydjcyaDcydi03MmgyODh2NzJoNzJ2LTcyaDcydjY3MmgtNzJ2LTcyaC03MnY3MkgzMzZ2LTcyaC03MnY3MmgtNzJabTcyLTE0NGg3MnYtODBoLTcydjgwWm0wLTE1Mmg3MnYtODBoLTcydjgwWm0wLTE1Mmg3MnYtODBoLTcydjgwWm0zNjAgMzA0aDcydi04MGgtNzJ2ODBabTAtMTUyaDcydi04MGgtNzJ2ODBabTAtMTUyaDcydi04MGgtNzJ2ODBaTTQwOC0yMTZoMTQ0di01MjhINDA4djUyOFptMC01MjhoMTQ0LTE0NFoiLz48L3N2Zz4=');
    height: 18px;
    width: 18px;
    display: inline-flex;
}
.trailer-button.active .trailer-icon,
.trailer-button:hover .trailer-icon {
    filter: invert(1);
}

/* Ensure the video embed code fills its container */
.trailer-wrapper iframe,
.trailer-wrapper .hidden-trailer-video {
    width: 100%;
    aspect-ratio: 16 / 9; /* Standard video ratio */
}