#gallery {
  --cols: 5;
}

.slide:nth-child(odd) {
  --gradient-angle: var(--gradient-angle-base);
}

.slide:nth-child(even) {
  --gradient-angle: var(--gradient-angle-reverse);
}

@media screen and (max-width: 1920px) {
  #gallery {
    --cols: 4;
  }

  .slide:nth-child(8n + 1),
  .slide:nth-child(8n + 3),
  .slide:nth-child(8n + 6),
  .slide:nth-child(8n + 8) {
    --gradient-angle: var(--gradient-angle-base);
  }

  .slide:nth-child(8n + 2),
  .slide:nth-child(8n + 4),
  .slide:nth-child(8n + 5),
  .slide:nth-child(8n + 7) {
    --gradient-angle: var(--gradient-angle-reverse);
  }
}

@media screen and (max-width: 1600px) {
  #gallery {
    --cols: 3;
  }

  .slide:nth-child(odd) {
    --gradient-angle: var(--gradient-angle-base);
  }

  .slide:nth-child(even) {
    --gradient-angle: var(--gradient-angle-reverse);
  }
}

@media screen and (max-width: 1280px) {
  #gallery {
    --cols: 2;
  }

  .slide:nth-child(4n + 1),
  .slide:nth-child(4n + 4) {
    --gradient-angle: var(--gradient-angle-base);
  }

  .slide:nth-child(4n + 2),
  .slide:nth-child(4n + 3) {
    --gradient-angle: var(--gradient-angle-reverse);
  }
}

@media screen and (max-width: 720px) {
  #gallery {
    --cols: 1;
  }

  .slide:nth-child(odd) {
    --gradient-angle: var(--gradient-angle-base);
  }

  .slide:nth-child(even) {
    --gradient-angle: var(--gradient-angle-reverse);
  }
}

@media screen and (orientation: portrait) {
  html {
    font-size: 1vmax;
  }

  #gallery {
    grid-auto-rows: 25vmax;
  }
}