.work-list {
  --work-list-item-width: 340px;

  display: grid;
  grid-template-columns: var(--work-list-item-width);
  align-content: start;
  row-gap: 25px;
  column-gap: 1px;
  min-height: 100vh;
  padding: 40vh var(--page-gutter) 10vh;
}

[work-list-item-number] {
  scroll-margin-top: 12vw;
}

.work-list-item {
  display: flex;
  align-items: center;
  gap: 20px;
}

.work-list-item__title-link {
  min-width: 0;
}

.work-list-item__title {
  margin: 0;
}

.work-list-item__gallery {
  position: relative;
  flex: 0 0 80px;
  width: 80px;
  height: 50px;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: #fff;
  cursor: pointer;
}

.work-list-item__gallery::-webkit-scrollbar { display: none; }

.work-list-item__track {
  display: flex;
  width: 100%;
  height: 100%;
}

.work-list-item__slide {
  flex: 0 0 100%;
  min-width: 100%;
  min-height: 100%;
}

.work-list-item__slide img,
.work-list-item__slide video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.work-list-item__error {
  display: block;
}

@media (max-width: 600px) {
  .work-list {
    padding-top: 60vw;
  }

  [work-list-item-number] {
    scroll-margin-top: 31vw;
  }
}

/* Add a column at 2.2, 3.2 and 4.2 times the base item width. */
@media (min-width: 748px) {
  .work-list {
    grid-template-columns: repeat(2, var(--work-list-item-width));
  }
}

@media (min-width: 1088px) {
  .work-list {
    grid-template-columns: repeat(3, var(--work-list-item-width));
  }
}

@media (min-width: 1428px) {
  .work-list {
    grid-template-columns: repeat(4, var(--work-list-item-width));
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-list-item__gallery { scroll-behavior: auto; }
}