.cb-image-gallery {
  --tile-size: 16.125rem;
  --gap: 1rem;
  text-align: center;

  .swiper {
    width: calc((var(--tile-size) * 5) + (var(--gap) * 4));
  }

  h2 {
    max-width: min(calc(1140px * 0.42), 100%);
    line-height: 1.3;
    margin-inline: auto;
    margin-block-end: 3.3rem;
  }

  .image-gallery__intro {
    column-count: 2;
    gap: 4rem;
    max-width: 70%;
    margin-inline: auto;
  }

  .swiper {
    margin-block-start: 2.8rem;
  }

  .swiper-slide {
    width: var(--tile-size);

    img {
      cursor: pointer;
      object-fit: cover;
      height: var(--tile-size);
      width: 100%;
      border-radius: 32px;

      &:first-child {
        margin-block-end: var(--gap);
      }
    }
  }

  .swiper-slide--big {
    width: calc(var(--tile-size) * 2 + var(--gap));
    height: calc(var(--tile-size) * 2 + var(--gap));

    img {
      height: 100%;
      margin-block-end: 0 !important;
    }
  }

  .image-gallery__stage {
    width: fit-content;
    height: min(800px, 80%);
    padding: 0;
    margin: auto;
    border: none;

    &::backdrop {
      background-color: rgba(217, 217, 217, 0.8);
    }

    .image-gallery__stage-img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }

    .image-gallery__close {
      position: static;
      border: none;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      width: 4.625rem;
      height: 4.625rem;
      background-color: transparent;

      path {
        fill: var(--color-darkblue--100);
      }
    }

    &[open] {
      .image-gallery__close {
        position: fixed;
        top: 1.5rem;
        right: 1.5rem;
      }
    }
  }
}

.cb-image-gallery {
  .swiper-container {
    position: relative;
    width: fit-content;
    margin-inline: auto;

    .swiper {
      overflow: hidden;
      margin-block-start: 2.8rem;
    }

    .swiper-navigation {
      display: flex;
      justify-content: space-between;
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      padding: 0 10px;
      z-index: 10;

      .swiper-button-prev,
      .swiper-button-next {
        width: 4.8125rem;
        height: 4.8125rem;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;

        &::after {
          display: none;
        }

        &:hover svg rect {
          fill: var(--color-grey--100);
        }
      }

      .swiper-button-prev svg {
        position: absolute;
        right: 50px;
      }

      .swiper-button-next svg {
        position: absolute;
        right: -50px;
      }
    }
  }
}

@media only screen and (max-width: 1024px) {
  .cb-image-gallery {
    .image-gallery__intro {
      max-width: 100%;
    }
  }
}

@media only screen and (max-width: 767px) {
  .cb-image-gallery {
    --tile-size: 9rem;

    header {
      .image-gallery__intro {
        column-count: 1;
      }
    }

    .swiper {
      width: calc((var(--tile-size) * 2) + var(--gap));
    }
    .swiper-button-prev svg,
    .swiper-button-next svg {
      display: none;
    }
  }
}