:root{
  --masonry-filter-min-column-width: 20em;
  --masonry-filter-gap: 1em;
}

.vmf,
.masonry-filter {
  width: 100%;
}

.vmf-controls,
.masonry-filter__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.vmf-group,
.masonry-filter__group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vmf-button,
.masonry-filter__button {
  appearance: none;
  border: 1px solid #c9c9c9;
  background: #f6f6f6;
  color: #1d1d1d;
  border-radius: 0.25rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
}

.vmf-button:hover,
.vmf-button:focus-visible,
.masonry-filter__button:hover,
.masonry-filter__button:focus-visible {
  background: #ededed;
  outline: none;
}

.vmf-button.is-checked,
.masonry-filter__button.is-checked {
  background: #0b5ed7;
  border-color: #0b5ed7;
  color: #fff;
}

.vmf-grid,
.masonry-filter__grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--masonry-filter-min-column-width, 20em), 1fr)
  );
  gap: var(--masonry-filter-gap, 1em);
  align-items: start;
}

.vmf-grid > .vmf-item,
.masonry-filter__grid > .masonry-filter__item {
  min-width: 0;
}