.category-link {
  text-decoration: none;
  padding: var(--site-padding);
  display: flex;
  border: var(--regular-border-width) solid var(--color-lightgrey);
  border-radius: var(--regular-border-radius);
  --span: 4;
  flex-direction: column;
  justify-content: space-between;
}
@media (hover: hover) {
  .category-link:hover {
    /* opacity: .9; */
  }
  .category-link:hover .category-title .icon {
    width: 1em;
  }
}
.category-thumbnail {
  display: block;
  height: 8rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 50%;
  margin: 0 auto 1rem auto;
}
.category-title {
  background-color: var(--color-lightgrey);
  display: block;
  font-weight: 500;
  padding: calc(var(--site-padding) / 2) var(--site-padding);
  border-radius: var(--regular-border-radius);
}
.category-title .icon {
  vertical-align: middle;
  transition: width .2s;
  width: 0;
}


@media (min-width: 1400px) {
  .category-link {
    --span: 3;
  }
}
@media (min-width: 1600px) {
  .category-link {
    /* --span: 2; */
  }
}
@media (max-width: 900px) {

  .layout.categories {
    display: grid;
  }
  .category-link {
    --span: 6;
    padding: .5em;
  }
  .layout.categories .column + .column {
  margin-top: 0;
  }

}