.map {
  margin: $margin-double 0;

  .map-title {
    text-transform: capitalize;
  }

  .map-image {
    transition: all .5s ease-out;
  }

  .map-container-wrapper {
    position: relative;
    height: 64px;

    @include breakpoint(md) {
      height: 85px;
    }

    @include breakpoint(lg) {
      height: 140px;
    }
  }

  .map-container {
    position: absolute;
    width: 100%;
    text-align: center;
  }

  &:hover {
    .hover-map {
      opacity: 1;
      width: 100%;

      img {
        transform: scale(1.03);
      }
    }
  }

  .initial-map {
    opacity: 1;
    z-index: 1;
  }

  .hover-map {
    opacity: 0;
    z-index: 2;

    img {
      transform: scale(1);
    }
  }
}