.conveyor {
  background: var(--color-secondary-or-base-bg);
  color: var(--color-secondary-or-base-fg);
  padding: var(--vertical-inner) 0;
  margin: 0;
  @media (min-width: 1000px) {
    padding: var(--vertical-inner) 0 var(--4);
  }
}

.conveyor__intro {
  max-width: var(--max);
  margin: auto;
  padding: 0 var(--2) var(--2);
  @media (min-width: 1000px) {
    padding: 0 var(--6) var(--4);
  }
}

.conveyor__items {
  white-space: nowrap;
  overflow: scroll;
  &::after,
  &::before {
    content: '';
    display: inline-block;
    width: var(--2);
  }
  @media (min-width: 1000px) {
    &::after,
    &::before {
      width: max(calc(((100vw - var(--max)) / 2)), var(--6));
    }
  }
  &::-webkit-scrollbar {
    display: none;
  }
}

.conveyor__item {
  display: inline-block;
  white-space: normal;
  width: calc((var(--columns) - 4) * var(--1));
  @media (min-width: 800px) {
    width: calc(min(var(--max), 100vw) / 2);
  }
  vertical-align: middle;
  &:nth-child(n + 2) {
    margin-left: var(--1);
  }
}

.conveyor__image {
  padding: var(--2) 0 0;
  &::before {
    content: '';
    display: block;
    margin-bottom: calc(var(--1) * -2);
  }
  img {
    max-width: 100%;
    vertical-align: bottom;
  }
  clip-path: inset(var(--2) 0 var(--2) 0 round var(--curvynes));
  transition: clip-path 0.25s;
  .conveyor__item--focus > & {
    clip-path: inset(0 0 0 0 round var(--curvynes));
  }
}

.conveyor__caption {
  @media (min-width: 1200px) {
    margin-left: 50%;
  }
  @media (max-width: 1000px) {
    font-size: 0.8888rem;
  }
  margin-top: var(--1);
  transform: translateY(calc(var(--1) * -2));
  transition:
    transform 0.25s,
    margin-left 0.25s,
    font-size 0.25s;
  position: revative;
  .conveyor__item--focus > & {
    transform: none;
  }
}

.conveyor__title {
  margin: 0;
  @media (max-width: 999px) {
    font-size: 1.66666667rem;
  }
}

.conveyor__nav {
  display: none;
}