.downloads {
  display: grid;
  gap: clamp(10px, 5cqw, 30px);
}
.downloads--grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.downloads--2 {
  grid-template-columns: repeat(2, 1fr);
}
.downloads--1 {
  grid-template-columns: 1fr;
}
.downloads--1 .downloads__item {
  padding: 1em;
  padding-right: 3em;
}
.downloads--1 .downloads__item::before {
  top: 1em;
}
.downloads__item {
  --item-background: var(--item-background-color, var(--color-white));
  --item-color: var(--color-main);
  --item-color-type: var(--color-secondary);
  --item-color-title: var(--color-primary);
  --item-color-icon: var(--color-primary);
  --item--padding: clamp(10px, 4cqw, 20px);
  background-color: var(--item-background);
  color: var(--item-color);
  padding: var(--item--padding);
  padding-right: calc(var(--item--padding) * 2);
  border-radius: var(--border-radius-smaller);
  overflow: hidden;
  border: 1px solid var(--item-color-title);
}
.downloads__item::before {
  content: "";
  position: absolute;
  right: 1em;
  top: var(--item--padding);
  width: clamp(1em, 5cqw, 2em);
  aspect-ratio: 1/1;
  z-index: 1;
  mask: var(--icon-download) center/contain no-repeat;
  background-color: var(--item-color-icon);
  transition: var(--transition);
  opacity: 0.25;
}
.downloads__item:hover {
  --item-background: var(--color-primary);
  --item-color: var(--color-background);
  --item-color-type: var(--color-background);
  --item-color-title: var(--color-white);
  --item-color-icon: var(--color-white);
}
.downloads__title {
  font-family: var(--font-basic);
  font-weight: var(--font-weight-medium);
  font-optical-sizing: auto;
  font-size: var(--font-size-24);
  color: var(--item-color-title);
  word-break: break-all;
  margin: 0;
  transition: var(--transition);
}
.downloads__type {
  font-size: var(--font-size-16);
  color: var(--item-color-type);
  margin: 0.25em 0 0 0;
  transition: var(--transition);
  font-weight: var(--bold);
}
.downloads__info {
  font-size: var(--font-size-14);
  opacity: 0.75;
  margin: 0.75em 0 0 0 !important;
}
@media screen and (max-width: 600px) {
  .downloads--2 {
    grid-template-columns: 1fr;
  }
}