.group.photo_gallery-group {
  .row.photo_gallery-row {
    padding-right: 0;
    padding-left: 0;
    .photo_gallery {
      width: 100%;
      &.gutters {
        padding-right: calculateRem(50);
        padding-left: calculateRem(50);
        .title-paragraph {
          padding-right: 0;
          padding-left: 0;
        }
        .gallery {
          column-gap: calculateRem(15);
          &.gallery-of-less {
            &.gallery-of-2 {
              .image-container {
                @include breakpoint(mobile) {
                  width: calc(50% - 5px);
                }
                @include breakpoint(tablet) {
                  width: calc(50% - 7.5px);
                }
              }
            }
            &.gallery-of-3 {
              .image-container {
                width: calc(33.33333% - 7.5px);
              }
            }
            &.gallery-of-4 {
              .image-container {
                width: calc(25% - 7.5px);
              }
            }
          }
          .image-container {
            @include breakpoint(mobile) {
              margin-bottom: calculateRem(10);
              &.small {
                width: calc(50% - 5px);
                &.left {
                  margin-right: calculateRem(10);
                }
              }
            }
            @include breakpoint(tablet) {
              margin-bottom: calculateRem(15);
              &.small {
                width: calc(50% - 7.5px);
                &.left {
                  margin-right: calculateRem(15);
                }
              }
            }
          }
        }
      }
      .title-paragraph {
        padding-right: calculateRem(50);
        padding-left: calculateRem(50);
      }
      .gallery {
        width: 100%;
        line-height: 0;
        @include breakpoint(tablet) {
          column-count: 2;
          column-gap: 0;
        }
        &.gallery-of-less {
          column-count: auto;
          display: flex;
          justify-content: space-between;
          &.gallery-of-1 {
            .image-container .image {
              padding-top: 50%;
            }
          }
          &.gallery-of-2 {
            .image-container {
              width: 50%;
            }
          }
          &.gallery-of-3 {
            .image-container {
              width: 33.333333%;
            }
          }
          &.gallery-of-4 {
            .image-container {
              width: 25%;
            }
          }
        }

        .image-container {
          overflow: hidden;
          line-height: 0;
          width: 100%;
          &.small {
            width: 50%;
          }
          .image {
            width: 100%;
            height: 0;
            padding-top: 100%;

            transition: all 1.5s ease-out;
            &:hover {
              transform: scale(1.05);
            }
          }
        }
      }
    }
  }
}
