.filtering-row {
    margin-bottom: 3.2rem !important;
}

.filter-btn {
    display: none;
}

.buttons {
    grid-template-columns: 1fr !important;
    width: 40% !important;
}

.view-mode-btns {
    display: none;
}

.overview-row-sm {
    display: none;
}

.jobs {
    font-size: 2rem;
    font-weight: 300;
    color: var(--color-text-muted);
}

.person-fav-btn,
.filmography-filter {
    border-radius: 0.5rem !important;
}

.bio {
    font-size: 1.6rem;
}

.job-title-row {
    margin-top: 3.6rem;
}

.job-title-row h2 {
    font-size: 4.2rem;
}

.filtering-row {
    margin-top: 1.4rem;
    margin-bottom: 4.2rem;
}

.filmography-filter {
    width: 100% !important;
    padding: 1.2rem !important;
    border: none;
    font-size: 1.6rem;
}

.single-credit-row {
    margin-bottom: 3.2rem;
}

.film-poster-col {
    max-width: 16rem;
}

.film-poster-container {
    position: relative;
}

.credit-user-actions {
    display: flex;
    justify-content: space-around;
    align-content: center;
    position: absolute;
    width: 100%;
    padding: 0.1rem;
    background-color: rgba(35, 58, 80, .65);
    bottom: 0.5rem;
    left: 0;
}

.credit-user-actions span i {
    font-size: 2.8rem;
}

.film-poster {
    border-radius: 0.6rem;
    width: 100%;
}

.single-credit-container {
    padding-left: 1.8rem;
}

.credit-film-title {
    margin-bottom: 0 !important;
    font-weight: 700;
    font-size: 1.85rem;
    color: var(--color-text);
}

.character-name-row {
    margin-top: 0.25rem !important;
    font-size: 1.3rem;
    color: var(--color-text-dim);
}

.character-name {
    font-weight: 600;
    font-size: 1.38rem;
    color: var(--color-text-muted);
}

.credit-title-row .col a {
    display: inline-block !important;
    text-decoration: none !important;
    color: var(--color-text-soft);
}

.release-year {
    display: inline-block !important;
    font-size: 1.7rem !important;
    color: var(--color-text-dim);
    font-weight: 280;
}

.overview-row {
    margin-top: 0.6rem;
}

.credit-film-overview {
    font-size: 1.4rem;
    color: var(--color-text-muted);
    font-weight: 300;
    line-height: 1.25;
    border-bottom: 0.1rem solid var(--color-border);
    padding-bottom: 1rem;
    margin-bottom: 0.6rem !important;
}

.credit-film-runtime {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 350;
    letter-spacing: 1.1px;
    color: var(--color-text-muted);
    margin-bottom: 0 !important;
}

.directors a,
.stars a {
    color: var(--color-link);
    font-weight: 600;
    font-size: 1.3rem;
}

.person-credits-button-row {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    column-gap: 3rem;
    margin-top: 1rem;
}

.person-credits-button-row div .rating-stars {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    padding-left: 0 !important;
}

.person-credits-button-row div .rating-stars .rating-star {
    font-size: 3.45rem;
}

.rating-limits-container {
    margin-left: 1rem;
}

.rating-limits {
    display: inline-block;
    font-size: 2.4rem;
}

.single-person-button {
    display: grid;
    grid-template-columns: 1fr;
}

.single-person-button .fs-btn {
    height: 80% !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-btn-surface);
    padding: 1rem 0;
}

.single-person-button .fs-btn .default-btn {
    font-size: 1.8rem;
    font-weight: 500;
}

.person-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.1rem;
}

.person-buttons .fs-btn {
    height: 80% !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-btn-surface);
    padding: 0.2rem;
}

.person-buttons .default-btn {
    display: contents;
    font-size: 1.2rem;
    color: var(--color-text-light);
    letter-spacing: 0.05rem;
    transition: all 0.3s ease-out;
}

.person-buttons .default-btn i {
    font-size: 2.8rem;
}

.person-buttons .left-btn {
    border-radius: 5px 0 0 5px;
}

.person-buttons .right-btn {
    border-radius: 0 5px 5px 0;
}

.current-credits-rating {
    margin-left: 1.8rem;
    align-content: center;
}

.current-credits-rating p {
    font-size: 2rem;
    align-self: center;
    margin-bottom: 0 !important;
}

.single-btn {
    border-radius: 0.5rem !important;
}


/* Filters section */

.person-filters {
    padding-left: 3.6rem;
}

.person-filters .row h3 {
    font-size: 1.4rem;
}

.person-filters .row .col .related-link {
    display: block;
    color: var(--color-link);
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 600;
}

.filters-title-row h3 {
    font-size: 2.8rem !important;
}

.single-filter-title-row {
    margin-top: 2.4rem;
    border-bottom: 0.1rem solid var(--color-border);
}

.single-filter-title-row h3 {
    font-size: 1.8rem !important;
}

.filter-row {
    margin-top: 0.8rem;
    line-height: 1.4;
}

.filter-row a {
    display: block;
    color: var(--color-text-muted);
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
}

.filter-row a.active {
    color: #dcf836;
}

.you-filter {
    margin-top: 3.6rem !important;
}

.ad-section {
    padding-left: 4rem;
}

.sorting-buttons-row {
    margin-top: 2.8rem;
    margin-bottom: 2.8rem;
}

.sort-title {
    font-size: 1.6rem;
    margin-bottom: 0 !important;
}

.sorting-buttons {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    gap: 0.4rem;
}

.sorting-buttons .sorting-btn,
.view-mode-btns .sorting-btn {
    font-size: 1.2rem;
    padding: 0.2rem 1rem;
    font-weight: 600;
    color: var(--color-text);
    background-color: var(--color-chip-bg);
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.3s ease-out;
    align-self: center;
    white-space: nowrap;
}

.sorting-buttons .sorting-btn.active,
.view-mode-btns .sorting-btn.active {
    background-color: var(--color-active);
}

.sorting-buttons .first-btn {
    margin-left: 1rem;
}

.person-credits-button-row-sm {
    display: none;
}

.directors-row-sm,
.stars-row-sm {
    display: none;
}

@media (max-width: 1024px) {
    .single-person-button .fs-btn .default-btn {
        font-size: 1.4rem;
    }

    .person-buttons .default-btn i {
        font-size: 2.4rem;
    }

    .person-credits-button-row div .rating-stars .rating-star {
        font-size: 3.2rem;
    }

    .rating-stars {
        padding: 0 0 0.2rem 2.4rem;
    }

    .current-credits-rating p {
        font-size: 1.8rem;
    }

    .credit-film-overview {
        font-size: 1.35rem;
        line-height: 1.2;
        padding-bottom: 0.8rem;
    }

    .directors-row,
    .stars-row,
    .person-credits-button-row {
        line-height: 1.35;
    }
}

@media (max-width: 900px) {
    .filter-btn {
        display: inline;
    }

    .job-title-row h2 {
        font-size: 3rem;
    }

    .related-resources-section {
        display: none;
    }

    .filters-section {
        display: none;
    }

    .bio {
        font-size: 1.6rem;
        padding-right: 7rem;
    }

    .job-title-row {
        margin-top: 2.4rem;
    }

    .filters-section-sm {
        display: block;
        margin-top: 1.4rem;
    }

    .filter-btn {
        margin-left: 1.2rem;
    }
}

@media (max-width: 780px) {
    .person-buttons .fs-btn {
        height: 100% !important;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--color-btn-surface);
        padding: none;
    }

    .person-buttons .default-btn i {
        font-size: 2rem;
    }

    .credit-film-overview {
        font-size: 1.35rem;
        line-height: 1.2;
    }

    .credit-film-runtime {
        font-size: 1.25rem;
        font-weight: 300;
        letter-spacing: 1px;
    }

    .directors a,
    .stars a {
        font-size: 1.25rem;
    }

    .release-year {
        font-size: 1.6rem !important;
    }

    .character-name {
        font-size: 1.35rem;
    }
}

@media (max-width: 660px) {
    .credit-film-overview {
        font-size: 1.3rem;
        padding-bottom: 0.7rem;
        margin-bottom: 0.4rem !important;
    }

    .character-name {
        font-size: 1.3rem;
    }

    .credit-film-title {
        font-weight: 600;
        font-size: 1.8rem;
    }

    .single-person-button .fs-btn .default-btn {
        font-size: 1.3rem;
    }

    .person-buttons .default-btn i {
        font-size: 1.8rem;
    }

    .person-credits-button-row div .rating-stars .rating-star {
        font-size: 3rem;
    }

    .single-credit-row {
        margin-bottom: 2rem;
    }

    .current-credits-rating {
        margin-left: 1.6rem;
        align-content: center;
    }
}

@media (max-width: 600px) {
    .credit-film-overview {
        font-size: 1.3rem;
        padding-bottom: 0.7rem;
        margin-bottom: 0.4rem !important;
    }

    .credit-film-runtime {
        font-size: 1.25rem;
    }

    .person-credits-button-row {
        display: none;
    }

    .single-credit-row {
        margin-bottom: 0.8rem;
    }

    .person-credits-button-row-sm {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        column-gap: 1rem;
        margin-bottom: 1.8rem;
    }

    .sorting-buttons .first-btn {
        margin-left: 0.4rem;
    }
}

@media (max-width: 549px) {
    .film-nav {
        width: 100%;
        justify-content: start !important;
    }

    .item-title-mobile {
        margin-top: 3.4rem !important;
    }

    .jobs {
        font-size: 1.65rem;
    }

    .sorting-buttons-row {
        margin-top: 1.2rem;
        margin-bottom: 0.8rem;
    }

    .filters-section-sm {
        display: block;
        margin-top: 0;
    }

    .filtering-row {
        margin-bottom: 3.2rem;
    }

    .buttons {
        grid-template-columns: 1fr 2fr !important;
        width: 100% !important;
    }

    .view-mode-btns {
        display: flex;
        gap: 0.4rem;
    }

    .sorting-buttons {
        display: inline-block;
        margin-bottom: 0.8rem;
    }

    .sorting-buttons .first-btn {
        margin-left: 0;
    }

    .sorting-buttons .sorting-btn {
        margin-right: 0.3rem;
    }

    .sort-title {
        display: block !important;
        margin-bottom: 0.6rem !important;
    }

    .sorting-buttons .view-mode-btn {
        display: none !important;
    }

    .bio {
        font-size: 1.5rem;
        line-height: 1.4;
        padding-right: 0;
    }

    .rating-stars {
        margin-left: 1rem;
    }

    .rating-star {
        font-size: 3.2rem !important;
    }

    .credit-film-overview {
        font-size: 1.25rem;
    }

    .credit-film-runtime {
        font-size: 1.2rem;
    }
}

@media (max-width: 500px) {

    .directors-row,
    .stars-row {
        display: none;
    }

    .directors-row-sm,
    .stars-row-sm {
        display: flex;
    }

    .stars-row-sm {
        margin-bottom: 0.8rem;
    }

    .credit-film-overview {
        font-size: 1.3rem;
        border-bottom: none;
        line-height: 1.3;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .credit-film-runtime,
    .directors a,
    .stars a {
        font-size: 1.25rem;
    }
}

@media (max-width: 440px) {
    .credit-film-overview {
        font-size: 1.4rem;
    }

    .credit-film-runtime,
    .directors a,
    .stars a {
        font-size: 1.3rem;
    }

    .overview-row {
        display: none;
    }

    .directors-row,
    .stars-row,
    .overview-row-sm {
        display: flex;
    }

    .overview-row-sm {
        margin-bottom: 0.4rem;
    }

    .directors-row-sm,
    .stars-row-sm {
        display: none;
    }
}

@media (max-width: 400px) {
    .bio {
        font-size: 1.5rem;
        padding-right: 0;
    }

    .bio p {
        margin-bottom: 0;
    }

    .credit-film-title {
        font-weight: 550;
        font-size: 1.7rem;
    }

    .release-year {
        font-size: 1.5rem !important;
    }

    .character-name-row {
        margin-top: 0.2rem !important;
        font-size: 1.2rem;
        margin-bottom: 0.4rem;
    }

    .character-name {
        font-size: 1.2rem;
    }

    .credit-film-overview {
        font-size: 1.28rem;
    }

    .stars {
        line-height: 1.45;
    }

    .credit-film-runtime,
    .directors a,
    .stars a {
        font-size: 1.25rem;
    }

    .rating-stars {
        margin-left: 0;
    }

    .single-credit-row {
        margin-bottom: 0.7rem;
    }

    .person-credits-button-row-sm {
        margin-top: 0.8rem !important;
        padding-bottom: 1rem;
        border-bottom: 0.1rem solid var(--color-border);
    }

    .sorting-buttons .filter-btn {
        display: none;
    }

    .view-mode-btns .filter-btn {
        display: inline;
    }

    .last-person-credits-button-row-sm {
        border-bottom: none;
    }

    .bio {
        font-size: 1.4rem;
        line-height: 1.3;
    }
}

@media (max-width: 360px) {
    .sorting-buttons-row {
        width: 100% !important;
    }

    .sorting-buttons {
        column-gap: 0.2rem;
    }

    .filmography-filter {
        padding: 1rem !important;
        font-size: 1.2rem;
    }

    .credit-film-title {
        font-weight: 500;
        font-size: 1.6rem;
    }

    .job-title-row h2 {
        font-size: 2.6rem;
    }

    .nav {
        padding: 0.8rem 0 1.2rem 0 !important;
    }

    .single-credit-container {
        padding-left: 1rem;
    }

    .person-credits-button-row-sm {
        padding-bottom: 0.8rem;
    }

    .rating-star {
        font-size: 2.8rem !important;
    }

    .current-credits-rating p {
        font-size: 1.6rem;
    }

    .credit-film-runtime,
    .directors a,
    .stars a {
        font-size: 1.2rem;
    }

    .character-name-row {
        margin-bottom: 0.2rem;
    }

    .single-person-button .fs-btn .default-btn {
        font-size: 1.25rem;
    }
}