.updates-filter-container {
    padding: var(--spacing-xl) 0;
}

.updates-catalog-container {
    min-height: 65dvh;
}

.updates-controls-container {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
}

#updates-filter-toggle {
    border: none;
    background-color: transparent;
    display: none;
}

#updates-filter-toggle.active {
    display: flex;
    align-items: end;
}

.updates-card {
    grid-column: span 4;
    margin-top: var(--spacing-5xl);
    margin-bottom: var(--spacing-4xl);
}

.updates-card img {
    max-width: 100%;
}

.updates-card h3 {
    margin: var(--spacing-lg) 0;
}

.updates-card a {
    text-decoration: none;
    width: fit-content;
    display: block;
    overflow: hidden;
}

.updates-card:hover a h3 {
    text-decoration: underline;
}

.mobile-filter-button {
    grid-column: 1 / -1;
    display: none;
    margin-top: var(--spacing-xl);
}

.mobile-filter-button.active {
    display: none;
}

.mobile-filter-button button {
    width: 100%;
}

#active-filters {
    grid-column: 1 / -1;
    margin-top: var(--spacing-5xl);
    display: none;
    justify-content: start;
    gap: var(--spacing-xl);
}

#active-filters.active {
    display: flex;
}

#active-filters label {
    pointer-events: none;
}

.image-view {
    margin: var(--spacing-5xl) auto;
    row-gap: var(--spacing-5xl);
}

.image-view .updates-card,
.image-view .featured-update-card {
    margin: 0;
    grid-column: span 4 !important;
}

.image-view .updates-card h3,
.image-view .updates-card div,
.image-view .featured-update-card h3,
.image-view .featured-update-card div {
    display: none;
}

#no-results-message {
    grid-column: 1 / -1;
    margin-top: var(--spacing-5xl);
}

#no-career-message {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    margin: var(--spacing-9xl) 0;
}

#no-career-message div {
    grid-column: 4 / -4;
}

@media (max-width: 1024px) {
    #no-career-message div {
        grid-column: 1 / -1;
    }

    #updates-catalog-container {
        row-gap: var(--spacing-4xl);
    }

    .featured-update-card,
    .updates-card {
        margin: 0;
    }

}

@media (max-width: 767px) {
    .updates-filter-container {
        padding: var(--spacing-lg) 0;
    }

    #updates-filter-toggle {
        display: none !important;
    }

    .mobile-filter-button.active {
        display: block;
    }

    #active-filters {
        justify-content: space-between;
    }
}