section.heading {
  padding-block-end: var(--sections-space-larger);
}
section#materials {
  &.with-sidebar > :first-child {
    position: sticky;
    height: 100%;
    top: var(--sections-space-default);
  }
  & h3 {
    font-size: var(--font-size-larger);
    color: var(--text-color-dark-primary);
  }
  section {
    padding-block-end: var(--space-larger);
  }
  section:not(:last-of-type) {
    border-block-end: 1px dashed var(--border-color-dark-primary);
  }
  li .link-to-page.square.detail.wide {
    color: var(--text-color-dark-primary);
    max-width: 100%;
    min-width: auto;
    height: auto;
    background-color: var(--bg-color-light-secondary);

    > .cluster {
      flex-wrap: nowrap;
    }
    .link-to + span {
        font-size: var(--font-size-small);
        font-weight: var(--font-weight-regular);
    }
    & p:last-child {
      font-size: var(--font-size-x-small);
      font-weight: var(--font-weight-light);
      > span {
        margin-inline-start: var(--space-initial);
      }
    }
    .icon-download {
      background-image: url(/assets/img/materials/download_light.svg);
      width: 40px;
      min-width: 40px;
      height: 40px;
      transition: background-image .3s ease;
    }
  }
  @media (hover: hover) {
    li:hover .link-to-page.square.detail.wide {
      .icon-download {
        background-image: url(/assets/img/materials/download_dark.svg);
      }
    }
  }
}

@media (width <= 1024px) {
  section#materials {
    &.with-sidebar > :first-child {
      position: static;
    }
    .link-to-page.square.detail.wide {
      &> .cluster {
        align-items: end;
        &> .cluster {
          gap: var(--space-initial);
        }
      }
      .link-to .cluster {
        gap: 0;
      }
    }
  }
}