.flex-layout.update_archive .intro-row .pk-heading {
    color: var(--bruin);
    margin-bottom: max(2rem, calc(2 * var(--su)));
}

.flex-layout.update_archive .intro-row .filter-col * {
    font-size: max(1rem, calc(1.125 * var(--su)));
    font-weight: 700;
}

.flex-layout.update_archive .intro-row .filter-col .themes-filter {
    display: flex;
    align-items: center;
    gap: max(.5rem, calc(.5 * var(--su)));
}

.flex-layout.update_archive .intro-row .filter-col select {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--grijs);
    border: none;
    padding: max(.5rem, calc(.5 * var(--su))) max(2rem, calc(2 * var(--su))) max(.5rem, calc(.5 * var(--su))) max(.75rem, calc(.75 * var(--su)));
    min-height: 34px;
    width: auto;
    background-repeat: no-repeat;
    background-position: calc(100% - .75rem) center;
    background-size: max(.75rem, calc(.75 * var(--su)));
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 7.4L0 1.4L1.4 0L6 4.6L10.6 0L12 1.4L6 7.4Z' fill='black'/%3E%3C/svg%3E%0A");
}

.flex-layout.update_archive .intro-row .filter-col select:focus-visible {
    outline: none;
}

.flex-layout.update_archive .updates-grid {
    margin-top: max(.5rem, calc(.5 * var(--su)));
    transition: opacity 0.3s ease-in-out;
}

.flex-layout.update_archive .updates-grid.ajax-loading {
    opacity: 0.6;
    pointer-events: none;
}

.flex-layout.update_archive .updates-grid .pk-grid-container {
    row-gap: max(2rem, calc(5 * var(--su)));
    --column-gap: max(var(--pk-column-gap), calc(5 * var(--su)));
    column-gap: var(--column-gap);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-rule: 1px solid var(--zwart);
}

.flex-layout.update_archive .grid-load-more {
    margin-top: max(3rem, calc(4 * var(--su)));
    display: flex;
    justify-content: center;
}

.flex-layout.update_archive .grid-load-more .load-more-button {
    border: none;
}

.flex-layout.update_archive .grid-load-more .load-more-button .pk-button-text::after {
    transform: rotate(90deg);
}


@media screen and (max-width: 992px) {

    .flex-layout.update_archive .updates-grid .pk-grid-container {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
    
}



@media screen and (max-width: 767px) {

    .flex-layout.update_archive .updates-grid .pk-grid-container {
        grid-template-columns: repeat(1, minmax(0,1fr));
    }
    
}