.search-facets {
    margin-bottom: 1.5rem;
}

.facet-group {
    display: grid;
    font-family: var(--slu-font-roboto);
    font-size: 0.938rem;
    font-weight: 300;
}

#collapse_PY .facet-group {
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); /* minmax min value is arbitrary and content based */
}

#collapse_LAN .facet-group {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); /* minmax min value is arbitrary and content based */
}

#collapse_PT .facet-group,
#collapse_PN .facet-group,
#collapse_DN .facet-group,
#collapse_SDG .facet-group,
#collapse_PROG .facet-group,
#collapse_SSIF .facet-group {
    grid-template-columns: repeat(auto-fit, minmax(11.625rem, 1fr)); /* minmax min value is arbitrary and content based */
}

/* properties (A) and (B) are part of the same fix for label text wrapping around input element */
.facet-group label {
    padding: 0 0.625rem 0.5rem 1.25rem; /* (A) */
    text-indent: -1.375rem; /* (B) - this value is based on both (A) and (C)*/
}

.facet-group input:focus-visible, .facet-group input:hover {
    outline-offset: -1px;
}

.facet-count {
    color: var(--slu-betong);
}

.facet-group label input {
    margin-right: 0.125rem; /* (C) */
    position: relative;
    top: 0.125rem;
    width: 1rem;
    height: 1rem;
}

/* below is a workaround for centering three col-3 elements in lg and xl viewport sizes */
@media screen and (min-width: 992px) and (max-width: 1399px) {
    .search-facets {
        /* 16.66666667% is Bootstrap standard */
        padding-right: calc(16.66666667%);
        padding-left: calc(16.66666667%);
    }
}