.gallery-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1px;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}
.rosette-shape {
  pointer-events: visiblePainted;
  transition: filter 0.2s ease;
  cursor: pointer;
}
.rosette-shape:hover {
  /* unprefixed for modern browsers */
  filter: brightness(0.8);
  /* WebKit prefix for Safari */
  -webkit-filter: brightness(0.8);
}
.rosette-text {
  pointer-events: none;
  fill: white;
  font-family: sans-serif; 
  font-size: 18;
  text-anchor: middle;
}