.gallery {
  position: relative;
  overflow: hidden;
  max-height: ms(16);

  &:hover {

    .flickity-prev-next-button {
      opacity: 1;
    }
  }

  &.flickity-enabled {
    max-height: none;
  }

  .flickity-prev-next-button {
    @include square(65px);
    display: flex;
    justify-content: center;
    transition: opacity 0.2s ease, background 0.15s;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;

    &:hover {
      background: rgba(0, 0, 0, 0.2);
    }

    &.previous {
      left: ms(2);
    }

    &.next {
      right: ms(2);
    }

    .touch & {
      display: none;
    }

    svg {
      @include square(17px);
      position: static;
    }

    .arrow {
      fill: color(background);
    }
  }

  .flickity-page-dots {
    bottom: ms(-3);
    opacity: 0.5;
  }
}

.gallery-slide {
  width: 100%;
  height: 100%;
  white-space: nowrap;
}

@import "https://cdnjs.cloudflare.com/ajax/libs/flickity/1.2.1/flickity.min.css";

.gallery {
  position: relative;
  overflow: hidden;
  max-height: ms(16);

  &:hover {

    .flickity-prev-next-button {
      opacity: 1;
    }
  }

  &.flickity-enabled {
    max-height: none;
  }

  .flickity-prev-next-button {
    @include square(65px);
    display: flex;
    justify-content: center;
    transition: opacity 0.2s ease, background 0.15s;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;

    &:hover {
      background: rgba(0, 0, 0, 0.2);
    }

    &.previous {
      left: ms(2);
    }

    &.next {
      right: ms(2);
    }

    .touch & {
      display: none;
    }

    svg {
      @include square(17px);
      position: static;
    }

    .arrow {
      fill: color(background);
    }
  }

  .flickity-page-dots {
    bottom: ms(-3);
    opacity: 0.5;
  }
}

.gallery-slide {
  width: 100%;
  height: 100%;
  white-space: nowrap;
}

Create basic Gallery and rename old gallery files
Create basic Gallery and rename old gallery files
