Gutenberg Gallery: One

CSS

.wp-block-gallery {
    --wp--style--gallery-gap-default: var(--space-m) !important;
	
}
/* Target WordPress gallery images */
.wp-block-gallery .wp-block-image {
  position: relative;
  overflow: hidden;
	border-radius:var(--radius);
}

/* Make images zoom smoothly */
.wp-block-gallery .wp-block-image img {
  transition: transform 0.5s ease;
  display: block;
}

/* Plus sign */
.wp-block-gallery .wp-block-image::before {
  content: "+";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: white;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1; /* make sure it's above the overlay */
}

/* Overlay layer */
.wp-block-gallery .wp-block-image::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
/* Hover state */
.wp-block-gallery .wp-block-image:hover::after,
.wp-block-gallery .wp-block-image:hover::before {
  opacity: 1;
}

/* Alternate overlay colors */
.wp-block-gallery .wp-block-image:nth-child(3n + 1)::after {
  background: var(--primary-trans-80);
}
.wp-block-gallery .wp-block-image:nth-child(3n + 2)::after {
  background: var(--secondary-trans-80);
}
.wp-block-gallery .wp-block-image:nth-child(3n + 3)::after {
  background: var(--tertiary-trans-80);
}

/* Hover state */
.wp-block-gallery .wp-block-image:hover img {
  transform: scale(1.1);
}

PHP (functions.php)

//LINKS GALLERY IMAGES TO MEDIA FILES BY DEFAULT
add_action( 'after_setup_theme', function() {
    update_option( 'image_default_link_type', 'file' );
} );