.magazine {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.magazine ul {
  display: flex;
  list-style: none;
  overflow: auto;
  overscroll-behavior: contain;
  scroll-snap-type: x mandatory;
  margin: -26px auto;
  padding: 0;
  max-width: min(1000px, 100%);
  max-height: calc(100vh - (var(--margin) * 2));
  aspect-ratio: 2 / 1.414;
  cursor: pointer;
  scrollbar-width: none;
}

.magazine ul::-webkit-scrollbar {
  display: none;
}

.magazine__counter {
  position: fixed;
  left: 0;
  bottom: var(--margin);
  width: 100%;
  margin: 0;
  text-align: center;
  font-family: 'Arial-Narrow', sans-serif;
  font-size: var(--font-size-large);
}

.magazine li {
  display: flex;
  flex-shrink: 0;
  width: 100%;
  scroll-snap-align: start;
  padding: 28px;
  box-sizing: border-box;
}

.magazine__cover {
  justify-content: center;
}

.magazine__spread {
  position: relative;
}

.magazine__page {
  position: relative;
  width: 50%;
  height: 100%;
  box-sizing: border-box;
}

.magazine .magazine__spread {
  padding: 0;
}

.magazine__spread .magazine__page {
  overflow: hidden;
}

.magazine__spread .magazine__page:first-child {
  padding: 28px 0 28px 28px;
}

.magazine__spread .magazine__page:last-child {
  padding: 28px 28px 28px 0;
}

.magazine__spread .magazine__page:first-child::after,
.magazine__spread .magazine__page:last-child::after {
  content: '';
  position: absolute;
  top: 28px;
  bottom: 28px;
  width: 10px;
  pointer-events: none;
}

.magazine__spread .magazine__page:first-child::after {
  right: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 100%);
}

.magazine__spread .magazine__page:last-child::after {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.33) 0%, rgba(0, 0, 0, 0) 100%);
}

.magazine img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.magazine__cover--front .magazine__page::after,
.magazine__cover--back .magazine__page::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  mix-blend-mode: multiply;
  pointer-events: none;
}

.magazine__cover--front .magazine__page::after {
  left: 2%;
}

.magazine__cover--back .magazine__page::after {
  right: 2%;
}

@media (max-width: 600px) {

  .magazine {
    height: auto;
  }

  .magazine__counter {
    position: static;
    margin: var(--gap) auto var(--margin);
    width: 100%;
  }

}