.whizz {
  background: var(--color-secondary-or-base-bg);
  color: var(--color-secondary-or-base-fg);
  padding: var(--4) 0 var(--3);
}

.whizz__intro {
  max-width: var(--max);
  padding: 0 var(--2) var(--4);
  margin: auto;
  @media (max-width: 999px) {
    padding-bottom: var(--2);
  }
}

.whizz__items {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
  padding-bottom: var(--1);
}

.whizz__item {
  flex-shrink: 0;
  align-self: center;
  margin-left: max(calc((100vw - var(--max)) / 2), var(--2));
  width: min(var(--max), calc(100vw - var(--4)));
  scroll-snap-align: center;
  display: grid;
  grid-gap: var(--1);
  @media (max-width: 999px) {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto var(--2);
    grid-template-areas:
      'image image image'
      'nr text text'
      'right . left';
  }
  @media (min-width: 1000px) {
    grid-gap: var(--2) 0;
    grid-template-columns: 6fr 2fr 32fr 6fr 15fr 7fr 8fr;
    grid-template-rows: 1fr auto 1fr;
    grid-template-areas:
      '.     . image . text . .'
      'right . image . text . left'
      'nr    . image . text . .';
  }
}

.whizz__item:last-child {
  margin-right: max(calc((100vw - var(--max)) / 2), var(--2));
}

.whizz__number {
  grid-area: nr;
  font-weight: bold;
  font-size: 2rem;
  line-height: 1;
  @media (min-width: 1000px) {
    line-height: 0.7;
    font-size: 4rem;
    margin-top: auto;
  }
}

.whizz__image {
  grid-area: image;
}
.whizz__image img {
  width: 100%;
  vertical-align: bottom;
  height: auto;
}

.whizz__main {
  grid-area: text;
  margin-bottom: auto;
}

.whizz__item-title {
  font-weight: 600;
}

.whizz__item-title + p {
  display: inline;
}

.whizz__footer {
  margin-top: var(--2);
}

.whizz__nav {
  font-size: 2.11111111rem;
  @media (min-width: 1000px) {
    font-size: 3rem;
  }
  line-height: 0.6;
  font-family: var(--icons);
  display: contents;
}

.whizz__prev {
  text-decoration: none;
  grid-area: right;
  font-weight: 200;
}

.whizz__next {
  text-decoration: none;
  grid-area: left;
  font-weight: 200;
}

.whizz__title {
  margin: 0;
}