/**
 * 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.
 */

.wp-block-create-block-image-gallery {
    color: #fff;
    padding: 2px;
}


.custom-gallery-frontend.grid,
.gallery-preview.grid {
   display: grid;
   grid-column-gap: var(--column-gap, 10px);
   gap: var(--row-gap, 10px) var(--column-gap, 10px);
}

.custom-gallery-frontend.grid img,
.gallery-preview.grid img {
  width: 100%;
  aspect-ratio: 1 / 1;       /* makes perfect square */
  object-fit: cover;         /* crop instead of stretch */
  display: block;
}

.custom-gallery-frontend.masonry,
.gallery-preview.masonry {
  column-gap: var(--column-gap, 10px);
}

.custom-gallery-frontend.masonry img,
.gallery-preview.masonry img {
  width: 100%;
  height: auto;      
  margin-bottom: var(--row-gap, 10px);
  display: block;
  break-inside: avoid;
}