.filmography-tabs {
    margin-bottom: 20px;
}
.filmography-tabs .film-tab {
    padding: 8px 16px;
    margin-right: 5px;
    cursor: pointer;
    border: 1px solid #333;
    background: #fff;
}
.filmography-tabs .film-tab.active {
    border-color: red;
    color: red;
}

.filmography-tab-content .tab-body {
    display: none;
}
.filmography-tab-content .tab-body.active {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.years-grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
@media (min-width:768px){
    .years-grid {
    gap: 10px;
}
}
.year-item {
    width: 49%;
    position: relative;
    padding: 10px;
    background: #222;
    color: #fff;
    text-decoration: none;
}
.year-item::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #000;
    opacity: 0.5;
}
.year-item:hover {
    background: red;
}
a.year-item img {
    width: 100%;
    height: 215px;
    object-fit: cover;
}
span.year-label {
font-size: 30px;
    color: #fff;
    text-align: center;
    display: block;
}

.filmography-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
}
@media(min-width:768px){
    a.year-item img {
          height: 300px;
    }
    .year-item {
    width: 32.4%;
    }
}
@media(min-width:992px){
    a.year-item img {
          height: 300px;
    }
    .year-item {
    width: 32.4%;
    }
}
@media(min-width:1200px){
    .year-item {
    width: 24.35%;
    }
    a.year-item img {
          height: 390px;
    }
}


/* Default: desktop */
.filmography-dropdown {
    position: relative;
    display: none;
}
.filmography-dropdown select {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="6" viewBox="0 0 13 6" fill="none"><path d="M6.34624 6C6.69376 6.00062 7.03799 5.93274 7.35926 5.80023C7.68053 5.66773 7.97253 5.47321 8.21858 5.22779L12.5398 0.906599C12.6394 0.807003 12.6953 0.671923 12.6953 0.531074C12.6953 0.390224 12.6394 0.255143 12.5398 0.155548C12.4402 0.0559522 12.3051 -3.41145e-08 12.1642 -4.64279e-08C12.0234 -5.87414e-08 11.8883 0.0559522 11.7887 0.155548L7.46752 4.47674C7.17001 4.77388 6.76672 4.94078 6.34624 4.94078C5.92575 4.94078 5.52246 4.77388 5.22495 4.47674L0.903761 0.155547C0.804165 0.0559512 0.669085 -1.05137e-06 0.528235 -1.06368e-06C0.387386 -1.07599e-06 0.252306 0.0559512 0.15271 0.155547C0.0531139 0.255142 -0.00283817 0.390223 -0.00283818 0.531072C-0.00283819 0.671922 0.0531139 0.807002 0.15271 0.906598L4.4739 5.22779C4.71994 5.47321 5.01195 5.66773 5.33321 5.80023C5.65448 5.93274 5.99872 6.00062 6.34624 6Z" fill="%23fff"/></svg>');
  border: unset;
  width: 100%;
  background-repeat: no-repeat;
  background-position: 95%;
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari and Chrome */
  appearance: none;
}
.filmography-dropdown select:focus-visible {
  outline: unset;
}

@media (max-width: 768px) {
    .filmography-tabs {
        display: none;
    }

    .filmography-dropdown {
          border-radius: 10px;
                border: 1px solid #fff;
                color: #fff;
        display: block;
        margin-bottom: 16px;
    }

    .filmography-dropdown select {
        border-radius: 10px;
                border: 1px solid #fff;
        color: #fff;
        width: 100%;
        padding: 10px;
        font-size: 16px;
    }
     .filmography-dropdown select:focus{
        color: #fff;
     }
}