.imageGallery {
  position: relative;

  .innerWrapper {
    align-items: flex-start;

    .contentWrapper {
      position: relative;

      .content {
        width: 100%;
        max-width: 750px;
      }
    }

    .imageGalleryWrapper {
      position: relative;
      width: 100%;
      min-width: 0;
      overflow: hidden;
      margin-top: 75px;

      .controls {
        position: absolute;
        top: calc(50% - 43px);
        left: 0;
        z-index: var(--arrangeFront);
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 25px;

        &[hidden] { display: none; }

        .arrow {
          &.next,
          &.prev {
            position: relative;

            svg {
              .circle,
              .arrow {
                transition: var(--transitionLinearFast);
              }
            }

            &:hover {
              cursor: pointer;

              svg {
                .circle { fill: var(--green); }
                .arrow { fill: var(--black); }
              }
            }
          }

          &.prev {
            transform: rotate(-180deg);
          }
        }
      }

      .images {
        --perView: 1;
        --gap: clamp(15px, 2vw, 25px);
        --page: 0;
        display: flex;
        gap: var(--gap);

        @media (min-width: 640px) { --perView: 2; }
        @media (min-width: 1024px) { --perView: 3; }

        .image {
          flex: 0 0 calc((100% - var(--gap) * (var(--perView) - 1)) / var(--perView));
          transform: translateX(calc(var(--page) * var(--perView) * (-100% - var(--gap))));
          transition: transform var(--transitionLinear);
          border-radius: var(--roundedCorners);
          overflow: hidden;

          img {
            display: block;
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;
          }
        }
      }

      .pagination {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding: 25px;

        &[hidden] { display: none; }

        .dot {
          display: block;
          width: 10px;
          height: 10px;
          padding: 0;
          border: none;
          border-radius: 10px;
          background-color: var(--grey);
          cursor: pointer;
          transition: width var(--transitionLinear), background-color var(--transitionLinear);

          &.active {
            width: 25px;
            background-color: var(--green);
          }
        }
      }
    }
  }
}