.locations .filters {
  text-align: center;
}
.locations .filters .button-list {
  margin-top: 0;
  margin-bottom: 2em;
  --btn-bg: var(--bg);
  --btn-fg: var(--fg);
  font-size: 15px;
}
@media (max-width: 760px) {
  .locations .filters .button-list {
    font-size: 12px;
  }
}
.locations .filters .button-list > .buttons {
  text-align: center;
}
.locations .filters .button-list > .buttons > label {
  margin: 0 0.1em 0.35em 0.1em;
  padding: 0;
  display: inline-block;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -moz-user-select: none;
       user-select: none;
}
.locations .filters .button-list > .buttons > label > span {
  border-radius: 1.5em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-fg);
  padding: 0.45em 0.95em;
  display: block;
  transition: background-color var(--anim-speed, 0.2s) ease-in-out, color var(--anim-speed, 0.2s) ease-in-out, border-color var(--anim-speed, 0.2s) ease-in-out;
}
.locations .filters .button-list > .buttons > label > span > span {
  position: relative;
  top: 0.05em;
}
.locations .filters .button-list > .buttons > label input {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  visibility: hidden;
}
.locations .filters .button-list > .buttons > label input:checked + span {
  background: var(--btn-fg);
  color: var(--btn-bg);
}
.locations .filters .button-list > .buttons > label input:checked + span > svg {
  fill: var(--btn-bg);
}
@media (hover: hover) {
  .locations .filters .button-list > .buttons > label:hover > span {
    background: var(--btn-fg);
    color: var(--btn-bg);
  }
  .locations .filters .button-list > .buttons > label:hover > span > svg {
    fill: var(--btn-bg);
  }
}
.locations li.location a:hover .details,
.locations li.location a:focus .details {
  color: initial;
}
.locations li.location .details {
  margin-top: 0.5em;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}
.locations li.location .cats,
.locations li.location .tags {
  color: #545454;
}
.locations li.location .cats {
  text-transform: uppercase;
}
.locations li.location .description {
  margin: 0;
  padding-bottom: 0;
  padding-top: 0.5em;
  line-height: 1.5;
}
.locations li.location .tags {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.locations li.location .tags .tag {
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 0.9em;
  padding: 0.25em 0.75em;
  padding-top: 0.35em;
  display: block;
  line-height: 1;
}
