.et-widget-masonrygrid {
  .et-masonry-grid {
    --et-masonry-grid-row-height-xs: 360px;
    --et-masonry-grid-row-height-sm: 360px;
    --et-masonry-grid-row-height-md: 360px;
    --et-masonry-grid-row-height-lg: 360px;
    --et-masonry-grid-row-height-xl: 360px;

    display: grid;
    gap: $grid-gutter-width;

    &.no-padding {
      gap: 0;
    }

    &.et-hoverstyle-zoom {
      .et-masonry-grid-item-image {
        transition: transform .5s ease-in-out;
      }

      .et-masonry-grid-item:hover {
        .et-masonry-grid-item-image {
          transform: scale(1.2);
        }
      }
    }

    &.et-hoverstyle-blackwhiteOnHover {
      .et-masonry-grid-item-image {
        transition: filter .5s ease-in-out;
      }

      .et-masonry-grid-item:hover {
        .et-masonry-grid-item-image {
          filter: grayscale(1);
        }
      }
    }

    &.et-hoverstyle-colorOnHover {
      .et-masonry-grid-item-image {
        transition: filter .5s ease-in-out;
        filter: grayscale(1);
      }

      .et-masonry-grid-item:hover {
        .et-masonry-grid-item-image {
          filter: grayscale(0);
        }
      }
    }

    .et-masonry-grid-item {
      overflow: hidden;
      position: relative;

      background-color: $colorNeutral3;
      color: color-yiq($colorNeutral3);

      .et-masonry-grid-item-image,
      .et-masonry-grid-item-video video {
        object-fit: cover;
        width: 100%;
        height: 100%;
        object-position: center center;
      }

      .et-masonry-grid-item-video,
      .et-masonry-grid-item-video .et-video-container,
      .et-masonry-grid-item-video .et-video-resizer {
        width: 100%;
        height: 100%;
      }

      .et-masonry-grid-item-custom-content-wrapper {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }

      .et-masonry-grid-item-text-wrapper {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 20px;
        @include media-breakpoint-up(lg) {
          padding: 30px;
        }

        &.et-align-vertical-center {
          justify-content: center;
        }

        &.et-align-vertical-bottom {
          justify-content: flex-end;
        }

        &.et-align-horizontal-center {
          align-items: center;
        }

        &.et-align-horizontal-right {
          align-items: flex-end;
        }
      }

      .et-masonry-grid-item-text-content {
        &.et-text-backdrop {
          padding: 20px;
          @include media-breakpoint-up(lg) {
            padding: 30px;
          }
          background-color: $colorBackdrop;
          color: color-yiq($colorBackdrop);
          border-radius: $border-radius;
        }

        &.et-text-shadow {
          text-shadow: 0 0 3px color-yiq($colorContentBackground, $colorFontLight, $colorFontDark); // Inverted parameter logic intentionally to get the inverse color of the text
          &.et-text-backdrop {
            text-shadow: 0 0 3px color-yiq($colorBackdrop, $colorFontLight, $colorFontDark); // Inverted parameter logic intentionally to get the inverse color of the text
          }
        }

        > *:last-child {
          margin-bottom: 0;
        }
      }

      .et-masonry-grid-item-link {
        // We do this so we can cover up videos with a link
        position: absolute;
        display: block;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    }

    // IMPORTANT: Due to a bug in SCSSPHP we MUST NOT use grid-area here as that compiler will try to calculate on e.g. 1 / 1 / span 2 / span 2 and result in the wrong value: 1 / span 2 / span 2
    // Therefore we HAVE TO use the long variant with grid-row-start, grid-column-start, grid-row-end, grid-column-end.

    // Layout A
    &.et-masonry-grid-layout-a {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-xs));
      @include media-breakpoint-up(sm) {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-sm));
      }
      @include media-breakpoint-up(md) {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-md));
      }
      @include media-breakpoint-up(lg) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-lg));
      }
      @include media-breakpoint-up(xl) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-xl));
      }

      .et-masonry-grid-item:nth-child(1) {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: span 2;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(2) {
        grid-row-start: 3;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(3) {
        grid-row-start: 4;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      @include media-breakpoint-up(lg) {
        .et-masonry-grid-item:nth-child(1) {
          grid-row-start: 1;
          grid-column-start: 1;
          grid-row-end: span 2;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(2) {
          grid-row-start: 1;
          grid-column-start: 2;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(3) {
          grid-row-start: 2;
          grid-column-start: 2;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
      }
    }

    // Layout B
    &.et-masonry-grid-layout-b {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-xs));
      @include media-breakpoint-up(sm) {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-sm));
      }
      @include media-breakpoint-up(md) {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-md));
      }
      @include media-breakpoint-up(lg) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-lg));
      }
      @include media-breakpoint-up(xl) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-xl));
      }

      .et-masonry-grid-item:nth-child(1) {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(2) {
        grid-row-start: 2;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(3) {
        grid-row-start: 3;
        grid-column-start: 1;
        grid-row-end: span 2;
        grid-column-end: span 1;
      }

      @include media-breakpoint-up(lg) {
        .et-masonry-grid-item:nth-child(1) {
          grid-row-start: 1;
          grid-column-start: 1;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(2) {
          grid-row-start: 2;
          grid-column-start: 1;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(3) {
          grid-row-start: 1;
          grid-column-start: 2;
          grid-row-end: span 2;
          grid-column-end: span 1;
        }
      }
    }

    // Layout C
    &.et-masonry-grid-layout-c {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-xs));
      @include media-breakpoint-up(sm) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-sm));
      }
      @include media-breakpoint-up(md) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-md));
      }
      @include media-breakpoint-up(lg) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-lg));
      }
      @include media-breakpoint-up(xl) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-xl));
      }

      .et-masonry-grid-item:nth-child(1) {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: span 2;
        grid-column-end: span 2;
      }

      .et-masonry-grid-item:nth-child(2) {
        grid-row-start: 3;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(3) {
        grid-row-start: 3;
        grid-column-start: 2;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(4) {
        grid-row-start: 4;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 2;
      }

      @include media-breakpoint-up(lg) {
        .et-masonry-grid-item:nth-child(1) {
          grid-row-start: 1;
          grid-column-start: 1;
          grid-row-end: span 2;
          grid-column-end: span 2;
        }
        .et-masonry-grid-item:nth-child(2) {
          grid-row-start: 1;
          grid-column-start: 3;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(3) {
          grid-row-start: 1;
          grid-column-start: 4;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(4) {
          grid-row-start: 2;
          grid-column-start: 3;
          grid-row-end: span 1;
          grid-column-end: span 2;
        }
      }
    }

    // Layout D
    &.et-masonry-grid-layout-d {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-xs));
      @include media-breakpoint-up(sm) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-sm));
      }
      @include media-breakpoint-up(md) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-md));
      }
      @include media-breakpoint-up(lg) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-lg));
      }
      @include media-breakpoint-up(xl) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-xl));
      }

      .et-masonry-grid-item:nth-child(1) {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(2) {
        grid-row-start: 1;
        grid-column-start: 2;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(3) {
        grid-row-start: 2;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 2;
      }

      .et-masonry-grid-item:nth-child(4) {
        grid-row-start: 3;
        grid-column-start: 1;
        grid-row-end: span 2;
        grid-column-end: span 2;
      }

      @include media-breakpoint-up(lg) {
        .et-masonry-grid-item:nth-child(1) {
          grid-row-start: 1;
          grid-column-start: 1;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(2) {
          grid-row-start: 1;
          grid-column-start: 2;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(3) {
          grid-row-start: 2;
          grid-column-start: 1;
          grid-row-end: span 1;
          grid-column-end: span 2;
        }
        .et-masonry-grid-item:nth-child(4) {
          grid-row-start: 1;
          grid-column-start: 3;
          grid-row-end: span 2;
          grid-column-end: span 2;
        }
      }
    }

    // Layout E
    &.et-masonry-grid-layout-e {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-xs));
      @include media-breakpoint-up(sm) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-sm));
      }
      @include media-breakpoint-up(md) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-md));
      }
      @include media-breakpoint-up(lg) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-lg));
      }
      @include media-breakpoint-up(xl) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-xl));
      }

      .et-masonry-grid-item:nth-child(1) {
        grid-area: #{1 / 1 / span 2 / span 2};
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: span 2;
        grid-column-end: span 2;
      }

      .et-masonry-grid-item:nth-child(2) {
        grid-row-start: 3;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 2;
      }

      .et-masonry-grid-item:nth-child(3) {
        grid-row-start: 4;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(4) {
        grid-row-start: 4;
        grid-column-start: 2;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      @include media-breakpoint-up(lg) {
        .et-masonry-grid-item:nth-child(1) {
          grid-row-start: 1;
          grid-column-start: 1;
          grid-row-end: span 2;
          grid-column-end: span 2;
        }
        .et-masonry-grid-item:nth-child(2) {
          grid-row-start: 1;
          grid-column-start: 3;
          grid-row-end: span 1;
          grid-column-end: span 2;
        }
        .et-masonry-grid-item:nth-child(3) {
          grid-row-start: 2;
          grid-column-start: 3;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(4) {
          grid-row-start: 2;
          grid-column-start: 4;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
      }
    }

    // Layout F
    &.et-masonry-grid-layout-f {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-xs));
      @include media-breakpoint-up(sm) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-sm));
      }
      @include media-breakpoint-up(md) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-md));
      }
      @include media-breakpoint-up(lg) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-lg));
      }
      @include media-breakpoint-up(xl) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-xl));
      }

      .et-masonry-grid-item:nth-child(1) {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 2;
      }

      .et-masonry-grid-item:nth-child(2) {
        grid-row-start: 2;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(3) {
        grid-row-start: 2;
        grid-column-start: 2;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(4) {
        grid-row-start: 3;
        grid-column-start: 1;
        grid-row-end: span 2;
        grid-column-end: span 2;
      }

      @include media-breakpoint-up(lg) {
        .et-masonry-grid-item:nth-child(1) {
          grid-row-start: 1;
          grid-column-start: 1;
          grid-row-end: span 1;
          grid-column-end: span 2;
        }
        .et-masonry-grid-item:nth-child(2) {
          grid-row-start: 2;
          grid-column-start: 1;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(3) {
          grid-row-start: 2;
          grid-column-start: 2;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(4) {
          grid-row-start: 1;
          grid-column-start: 3;
          grid-row-end: span 2;
          grid-column-end: span 2;
        }
      }
    }

    // Layout G
    &.et-masonry-grid-layout-g {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(6, var(--et-masonry-grid-row-height-xs));
      @include media-breakpoint-up(sm) {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(6, var(--et-masonry-grid-row-height-sm));
      }
      @include media-breakpoint-up(md) {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(6, var(--et-masonry-grid-row-height-md));
      }
      @include media-breakpoint-up(lg) {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-lg));
      }
      @include media-breakpoint-up(xl) {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-xl));
      }

      .et-masonry-grid-item:nth-child(1) {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: span 2;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(2) {
        grid-row-start: 3;
        grid-column-start: 1;
        grid-row-end: span 2;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(3) {
        grid-row-start: 5;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(4) {
        grid-row-start: 6;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      @include media-breakpoint-up(lg) {
        .et-masonry-grid-item:nth-child(1) {
          grid-row-start: 1;
          grid-column-start: 1;
          grid-row-end: span 2;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(2) {
          grid-row-start: 1;
          grid-column-start: 2;
          grid-row-end: span 2;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(3) {
          grid-row-start: 1;
          grid-column-start: 3;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(4) {
          grid-row-start: 2;
          grid-column-start: 3;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
      }
    }

    // Layout H
    &.et-masonry-grid-layout-h {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(6, var(--et-masonry-grid-row-height-xs));
      @include media-breakpoint-up(sm) {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(6, var(--et-masonry-grid-row-height-sm));
      }
      @include media-breakpoint-up(md) {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(6, var(--et-masonry-grid-row-height-md));
      }
      @include media-breakpoint-up(lg) {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-lg));
      }
      @include media-breakpoint-up(xl) {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-xl));
      }

      .et-masonry-grid-item:nth-child(1) {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: span 2;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(2) {
        grid-row-start: 3;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(3) {
        grid-row-start: 4;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(4) {
        grid-row-start: 5;
        grid-column-start: 1;
        grid-row-end: span 2;
        grid-column-end: span 1;
      }

      @include media-breakpoint-up(lg) {
        .et-masonry-grid-item:nth-child(1) {
          grid-row-start: 1;
          grid-column-start: 1;
          grid-row-end: span 2;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(2) {
          grid-row-start: 1;
          grid-column-start: 2;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(3) {
          grid-row-start: 2;
          grid-column-start: 2;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(4) {
          grid-row-start: 1;
          grid-column-start: 3;
          grid-row-end: span 2;
          grid-column-end: span 1;
        }
      }
    }

    // Layout I
    &.et-masonry-grid-layout-i {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(6, var(--et-masonry-grid-row-height-xs));
      @include media-breakpoint-up(sm) {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(6, var(--et-masonry-grid-row-height-sm));
      }
      @include media-breakpoint-up(md) {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(6, var(--et-masonry-grid-row-height-md));
      }
      @include media-breakpoint-up(lg) {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-lg));
      }
      @include media-breakpoint-up(xl) {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-xl));
      }

      .et-masonry-grid-item:nth-child(1) {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(2) {
        grid-row-start: 2;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(3) {
        grid-row-start: 3;
        grid-column-start: 1;
        grid-row-end: span 2;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(4) {
        grid-row-start: 5;
        grid-column-start: 1;
        grid-row-end: span 2;
        grid-column-end: span 1;
      }

      @include media-breakpoint-up(lg) {
        .et-masonry-grid-item:nth-child(1) {
          grid-row-start: 1;
          grid-column-start: 1;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(2) {
          grid-row-start: 2;
          grid-column-start: 1;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(3) {
          grid-row-start: 1;
          grid-column-start: 2;
          grid-row-end: span 2;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(4) {
          grid-row-start: 1;
          grid-column-start: 3;
          grid-row-end: span 2;
          grid-column-end: span 1;
        }
      }
    }

    // Layout J
    &.et-masonry-grid-layout-j {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-xs));
      @include media-breakpoint-up(sm) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-sm));
      }
      @include media-breakpoint-up(md) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-md));
      }
      @include media-breakpoint-up(lg) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-lg));
      }
      @include media-breakpoint-up(xl) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-xl));
      }

      .et-masonry-grid-item:nth-child(1) {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: span 2;
        grid-column-end: span 2;
      }

      .et-masonry-grid-item:nth-child(2) {
        grid-row-start: 3;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(3) {
        grid-row-start: 3;
        grid-column-start: 2;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(4) {
        grid-row-start: 4;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(5) {
        grid-row-start: 4;
        grid-column-start: 2;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      @include media-breakpoint-up(lg) {
        .et-masonry-grid-item:nth-child(1) {
          grid-row-start: 1;
          grid-column-start: 1;
          grid-row-end: span 2;
          grid-column-end: span 2;
        }
        .et-masonry-grid-item:nth-child(2) {
          grid-row-start: 1;
          grid-column-start: 3;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(3) {
          grid-row-start: 1;
          grid-column-start: 4;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(4) {
          grid-row-start: 2;
          grid-column-start: 3;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(5) {
          grid-row-start: 2;
          grid-column-start: 4;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
      }
    }

    // Layout K
    &.et-masonry-grid-layout-k {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-xs));
      @include media-breakpoint-up(sm) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-sm));
      }
      @include media-breakpoint-up(md) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-md));
      }
      @include media-breakpoint-up(lg) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-lg));
      }
      @include media-breakpoint-up(xl) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-xl));
      }

      .et-masonry-grid-item:nth-child(1) {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(2) {
        grid-row-start: 1;
        grid-column-start: 2;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(3) {
        grid-row-start: 2;
        grid-column-start: 1;
        grid-row-end: span 2;
        grid-column-end: span 2;
      }

      .et-masonry-grid-item:nth-child(4) {
        grid-row-start: 4;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(5) {
        grid-row-start: 4;
        grid-column-start: 2;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      @include media-breakpoint-up(lg) {
        .et-masonry-grid-item:nth-child(1) {
          grid-row-start: 1;
          grid-column-start: 1;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(2) {
          grid-row-start: 2;
          grid-column-start: 1;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(3) {
          grid-row-start: 1;
          grid-column-start: 2;
          grid-row-end: span 2;
          grid-column-end: span 2;
        }
        .et-masonry-grid-item:nth-child(4) {
          grid-row-start: 1;
          grid-column-start: 4;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(5) {
          grid-row-start: 2;
          grid-column-start: 4;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
      }
    }

    // Layout L
    &.et-masonry-grid-layout-l {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-xs));
      @include media-breakpoint-up(sm) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-sm));
      }
      @include media-breakpoint-up(md) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, var(--et-masonry-grid-row-height-md));
      }
      @include media-breakpoint-up(lg) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-lg));
      }
      @include media-breakpoint-up(xl) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, var(--et-masonry-grid-row-height-xl));
      }

      .et-masonry-grid-item:nth-child(1) {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(2) {
        grid-row-start: 1;
        grid-column-start: 2;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(3) {
        grid-row-start: 2;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(4) {
        grid-row-start: 2;
        grid-column-start: 2;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(5) {
        grid-row-start: 3;
        grid-column-start: 1;
        grid-row-end: span 2;
        grid-column-end: span 2;
      }

      @include media-breakpoint-up(lg) {
        .et-masonry-grid-item:nth-child(1) {
          grid-row-start: 1;
          grid-column-start: 1;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(2) {
          grid-row-start: 1;
          grid-column-start: 2;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(3) {
          grid-row-start: 2;
          grid-column-start: 1;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(4) {
          grid-row-start: 2;
          grid-column-start: 2;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(5) {
          grid-row-start: 1;
          grid-column-start: 3;
          grid-row-end: span 2;
          grid-column-end: span 2;
        }
      }
    }

    // Layout M
    &.et-masonry-grid-layout-m {
      --et-masonry-grid-row-height-xs: 240px;
      --et-masonry-grid-row-height-sm: 240px;
      --et-masonry-grid-row-height-md: 240px;
      --et-masonry-grid-row-height-lg: 240px;
      --et-masonry-grid-row-height-xl: 240px;

      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(6, var(--et-masonry-grid-row-height-xs));
      @include media-breakpoint-up(sm) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(6, var(--et-masonry-grid-row-height-sm));
      }
      @include media-breakpoint-up(md) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(6, var(--et-masonry-grid-row-height-md));
      }
      @include media-breakpoint-up(lg) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, var(--et-masonry-grid-row-height-lg));
      }
      @include media-breakpoint-up(xl) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, var(--et-masonry-grid-row-height-xl));
      }

      .et-masonry-grid-item:nth-child(1) {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: span 2;
        grid-column-end: span 2;
      }

      .et-masonry-grid-item:nth-child(2) {
        grid-row-start: 3;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(3) {
        grid-row-start: 3;
        grid-column-start: 2;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(4) {
        grid-row-start: 4;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(5) {
        grid-row-start: 4;
        grid-column-start: 2;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(6) {
        grid-row-start: 5;
        grid-column-start: 1;
        grid-row-end: span 2;
        grid-column-end: span 2;
      }

      @include media-breakpoint-up(lg) {
        .et-masonry-grid-item:nth-child(1) {
          grid-row-start: 1;
          grid-column-start: 1;
          grid-row-end: span 2;
          grid-column-end: span 2;
        }
        .et-masonry-grid-item:nth-child(2) {
          grid-row-start: 3;
          grid-column-start: 1;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(3) {
          grid-row-start: 3;
          grid-column-start: 2;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(4) {
          grid-row-start: 1;
          grid-column-start: 3;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(5) {
          grid-row-start: 1;
          grid-column-start: 4;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(6) {
          grid-row-start: 2;
          grid-column-start: 3;
          grid-row-end: span 2;
          grid-column-end: span 2;
        }
      }
    }

    // Layout N
    &.et-masonry-grid-layout-n {
      --et-masonry-grid-row-height-xs: 240px;
      --et-masonry-grid-row-height-sm: 240px;
      --et-masonry-grid-row-height-md: 240px;
      --et-masonry-grid-row-height-lg: 240px;
      --et-masonry-grid-row-height-xl: 240px;

      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(6, var(--et-masonry-grid-row-height-xs));
      @include media-breakpoint-up(sm) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(6, var(--et-masonry-grid-row-height-sm));
      }
      @include media-breakpoint-up(md) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(6, var(--et-masonry-grid-row-height-md));
      }
      @include media-breakpoint-up(lg) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, var(--et-masonry-grid-row-height-lg));
      }
      @include media-breakpoint-up(xl) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, var(--et-masonry-grid-row-height-xl));
      }

      .et-masonry-grid-item:nth-child(1) {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(2) {
        grid-row-start: 1;
        grid-column-start: 2;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(3) {
        grid-row-start: 2;
        grid-column-start: 1;
        grid-row-end: span 2;
        grid-column-end: span 2;
      }

      .et-masonry-grid-item:nth-child(4) {
        grid-row-start: 4;
        grid-column-start: 1;
        grid-row-end: span 2;
        grid-column-end: span 2;
      }

      .et-masonry-grid-item:nth-child(5) {
        grid-row-start: 6;
        grid-column-start: 1;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      .et-masonry-grid-item:nth-child(6) {
        grid-row-start: 6;
        grid-column-start: 2;
        grid-row-end: span 1;
        grid-column-end: span 1;
      }

      @include media-breakpoint-up(lg) {
        .et-masonry-grid-item:nth-child(1) {
          grid-row-start: 1;
          grid-column-start: 1;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(2) {
          grid-row-start: 1;
          grid-column-start: 2;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(3) {
          grid-row-start: 2;
          grid-column-start: 1;
          grid-row-end: span 2;
          grid-column-end: span 2;
        }
        .et-masonry-grid-item:nth-child(4) {
          grid-row-start: 1;
          grid-column-start: 3;
          grid-row-end: span 2;
          grid-column-end: span 2;
        }
        .et-masonry-grid-item:nth-child(5) {
          grid-row-start: 3;
          grid-column-start: 3;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
        .et-masonry-grid-item:nth-child(6) {
          grid-row-start: 3;
          grid-column-start: 4;
          grid-row-end: span 1;
          grid-column-end: span 1;
        }
      }
    }
  }
}