:root {
  --color-primary: #ff7b02;
  /* === Green theme === */

  /* --color-primary-variant: #e5a55d;
  --color-bg-1: #000e17;
  --color-bg-2: #001e2d;
  --color-bg-3: #012734;
  --color-bg-4: #003347;
  --color-light: #85a2b2;
  --color-white: hsl(0,0%,90%); */

  /* === Purple theme === */
  --color-primary: #ff7b02;
  --color-primary-variant: #e5a55d;
  --color-bg-1: #140021;
  --color-bg-2: #1e0032;
  --color-bg-3: #25003e;
  --color-bg-4: #36005a;
  --color-light: #d0b8e0;
  --color-white: hsl(0, 0%, 90%);

  --container-width-lg: 88%;
  --container-width-md: 92%;

  --transition: all 400ms ease-in-out;
}

#gallery {
  margin-top: 12rem;
}
.gallery__head {
  display: flex;
  justify-content: space-between;
}

.gallery__container p {
  width: 55rem;
}

.swiper-wrapper {
  margin-top: 4rem;
  height: 37rem;
  padding-bottom: 7rem;
}

.swiper-slide {
  border: 0.5rem solid var(--color-bg-4);
  height: fit-content;
  max-height: 40rem;
  overflow: hidden;
  transition: var(--transition);
}

.swiper-slide:hover {
  box-shadow: 0 3rem 3rem rgba(0, 0, 0, 0.4);
}

.swiper-slide img {
  filter: saturate(0);
  transition: var(--transition);
}

.swiper-slide img:hover {
  filter: saturate(1);
}

.swiper-pagination-bullet {
  background: var(--color-primary);
}

@media screen and (max-width: 1024px) {
  #gallery {
    margin-top: 8rem;
  }

  .gallery__container p {
    width: 100%;
    margin-top: 2rem;
  }

  .swiper-wrapper {
    margin-top: 4rem;
    height: fit-content;
  }

  .swiper-slide {
    border: none;
  }
}

@media screen and (max-width: 600px) {
  #gallery {
    margin-top: 6rem;
  }

  .gallery__container p {
    margin-top: 1rem;
  }

  .swiper-wrapper {
    margin-top: 3rem;
  }
}