/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

/* --- Block Masonry
-------------------------------------------------------- */

.my-masonry-grid {
  display: -webkit-box; /* Not needed if autoprefixing */
  display: -ms-flexbox; /* Not needed if autoprefixing */
  display: flex;
  width: auto;
  gap: var(--column-gutter, 0);
  .my-masonry-grid_column {
    line-height: 0;
    img {
      width: 100%;
      margin-bottom: var(--column-gutter, 0);
    }
  }
}

.my-masonry-grid .my-masonry-grid_column img:last-child {
  margin-bottom: 0;
}

.my-masonry-grid.layout-one .my-masonry-grid_column,
.grid-item {
  padding-right: 0;
  background-clip: padding-box;
  img {
    max-width: 100%;
    width: 100%;
  }
}

/* Style your items */

// @media screen and (min-width: 500px) and (max-width: 700px) {
//   .my-masonry-grid.layout-four {
//     .my-masonry-grid_column:nth-child(2n) {
//       padding-right: 0;
//     }
//   }
// }

// @media screen and (min-width: 501px) {
//   .my-masonry-grid.layout-four {
//     .my-masonry-grid_column:nth-child(4n) {
//       padding-right: 0;
//     }
//   }

//   .my-masonry-grid.layout-two {
//     .my-masonry-grid_column:nth-child(2n) {
//       padding-right: 0;
//     }
//   }

//   .my-masonry-grid.layout-three,
//   .my-masonry-grid.layout-four,
//   .my-masonry-grid.layout-two {
//     .my-masonry-grid_column {
//       padding-right: var(--column-gutter, 0);
//     }
//   }
// }

// @media screen and (max-width: 700px) {
//   .my-masonry-grid.layout-three {
//     .my-masonry-grid_column:nth-child(2n) {
//       padding-right: 0;
//     }
//   }
// }
// @media screen and (min-width: 701px) {
//   .my-masonry-grid.layout-three {
//     .my-masonry-grid_column:nth-child(3n) {
//       padding-right: 0;
//     }
//   }

//   .my-masonry-grid.layout-four {
//     .my-masonry-grid_column:nth-child(4n) {
//       padding-right: 0;
//     }
//   }
// }

.grid-item img {
  display: none;
}

.block-editor-block-toolbar__slot {
  display: flex;
  align-items: center;
  button {
    height: 100%;
  }
}

.media-modal {
  z-index: 1600000;
}
