/* ===============  GALLERY - 1  ============== */
.gallery-1--container {
   position: relative;
   height: 65vh;
   width: 100%;
}

.gallery-1--container:hover .gallery-1--image:not(:hover),
.gallery-1--container:active .gallery-1--image:not(:active) {
   transform: scale(0.9);
   box-shadow: var(--box-shadow-img-not-hover);
}

.gallery-1--image {
   background-color: transparent;
   position: absolute;
   width: 70%;
   box-shadow: var(--box-shadow-img-prime);
   z-index: 1;
   transition: all 0.2s ease-in-out;
   outline-offset: 0.2rem;
   border: 1px solid #ddd;
}

.gallery-1__img {
   width: 100%;
   vertical-align: top;
}

.gallery-1--image:hover,
.gallery-1--image:active {
   transform: scale(1.31) translateY(-1rem);
   box-shadow: var(--box-shadow-img-hover);
   outline: 0.2rem solid #ddd;
   z-index: 2;
}

.gallery-1--image_1 {
   top: 10%;
   left: 1rem;
   transform-origin: left;
}

.gallery-1--image_2 {
   top: 25%;
   right: 1rem;
   transform-origin: right;
}

.gallery-1--image_3 {
   top: 40%;
   left: 15%;
   transform-origin: bottom;
}

/* ---   35 rem */
@media (min-width: 35rem) {
   .gallery-1--image {
      width: 50%;
   }

   .gallery-1--image_3 {
      left: 25%;
   }

   .gallery-1--image:hover,
   .gallery-1--image:active {
      transform: scale(1.8) translateY(-1rem);
   }
}

@media(min-width: 45rem) {
   .gallery-1--container {
      height: 75vh;
   }
}

/* ---   55 rem */
@media (min-width: 55rem) {
   .gallery-1--container {
      height: 80vh;
   }

   .gallery-1--image_1 {
      top: 5%;
      left: 3.5rem;
   }

   .gallery-1--image_2 {
      top: 15%;
      right: 3.5rem;
   }

   .gallery-1--image_3 {
      top: 30%;
   }
}

/* ================  GALLERY - 2  ============== */
.gallery-2 {
   display: flex;
   flex-wrap: wrap;
   padding-top: 2rem;
}

.gallery-2--image {
   cursor: pointer;
   overflow: hidden;
   flex: 100%;
   background-color: var(--color-primary-dark-prime);
}

.gallery-2__img {
   width: 100%;
   height: 100%;
   opacity: 0.5;
   transition: all 0.4s ease-in-out;
}

.gallery-2__img:hover,
.gallery-2__img:active {
   transform: scale(1.15);
   opacity: 1;
}

/* ---   48 rem */
@media(min-width: 48rem) {
   .gallery-2--image {
      flex: 50%;
   }
}