.documents {
  display: flex;
  flex-direction: column;
}
.documents > article {
  margin-block-start: 1rem;
  margin-block-end: 3rem;
}
.document-category_name {
  color:var(--wp--preset--color--primary);
  font-weight: 600;
  font-size: 1.25rem;
  border-bottom: 1px solid #DDD;
  padding-bottom: 1rem;
}
.document-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap:1rem;
}
.document-list.pocket_guides {
  grid-template-columns: 1fr;
  gap:2rem;
}
@media screen and (min-width:460px) {
  .document-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width:768px) {
  .document-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .document-list.pocket_guides {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width:960px) {
  .document-list {
    grid-template-columns: repeat(4, 1fr);
  }
  .document-list.pocket_guides {
    grid-template-columns: repeat(3, 1fr);
  }
}
.document-list.pocket_guides li {
  flex-direction: column;
  background: var(--wp--preset--color--tertiary);
  padding: 0.5rem 1.2rem 2rem 1.2rem;
  border-radius: 1rem;
}
.document-list.pocket_guides .document-thumbnail {
  height: 9rem;
  width: 8rem;
}
.document-list.pocket_guides .document-meta .document-name {
  font-size: 1.2rem;
  font-weight: bold;
}
.document-description {
  font-size: 0.875rem;
  color: var(--wp--preset--color--grey);
  margin: 1.5em 0;
}
.document-list.large .document {
  flex-direction: column;
}
.document-list.large .document-thumbnail {
  height: 5rem;
  width: 100%;
  flex: none;
}
.document-list.compact .document-name {
  font-size: 14px;
}
.document-name .type {
  font-size: 10px;
  display: block;
  color:var(--wp--preset--color--grey);
}
.document {
  display: flex;
  gap:1rem;
}
.document-meta {
  flex:3;
}
.document-thumbnail {
  height: 3rem;
  width: 2rem;
  flex:none;
  object-fit: contain;
}
.document-thumbnail.has-image {
  background-color:transparent;
}
.document-thumbnail:not(.has-image) {
  border: 1px solid var(--wp--preset--color--secondary);
  border-radius: 4px;
  position: relative;
  height: 2rem;
  width: 1.5rem;
}
.document-thumbnail:not(.has-image)::before {
  content: 'PDF';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.5rem;
  display: block;
  white-space: nowrap;
  font-weight: bold;
  color: var(--wp--preset--color--secondary);
}
.document-name {
  font-weight: 600;
  margin: 0;
}
.document-name a, .document-name span {
  font-weight: 600;
  text-decoration: underline 1px rgba(0 0 0 / 0%);
  cursor: pointer;
  display: inline-block;
}
.document-name a:hover, .document-name span:hover {
  text-decoration: underline 1px rgba(0 0 0 / 100%);
}
.document-tags {
  color:var(--wp--preset--color--grey);
  margin: 0;
  font-size: 0.875rem;
}
.single-document {
  display: flex;
  gap: 1rem;
  align-items: center;
}