.gal, .gal > button img {
    max-height: 450px;
}
.gal {
    width: fit-content;
    max-width: 100%;
    display: flex;
    justify-content: center;
    gap: min(20px, 4vw);
    margin: 0 auto 4vmin;
	padding: 3px;				/* для box-shadow */
}
.gal > button {
	all: unset;
	cursor: zoom-in;
}	
.gal > button img {
    display: block;
    height: auto;
    width: auto;
    max-width: 100%;
    object-fit: contain;
	box-shadow: 0px 2px 3px 2px #ddd;
}
.gal [popover] {
	border: 0;
	padding: 0;
	background: transparent;

	overflow: hidden;
	max-width: 100%;			/* важно для горизонтального скролла */

	opacity: 0;
	transform: scale(0.3);
	transition: opacity .5s, transform .5s, overlay .5s allow-discrete, display .5s allow-discrete;
}
.gal .img-wrap {
	container-type: scroll-state;
    overflow-x: auto;
    overflow-y: hidden;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}
.gal [popover]:popover-open {
	opacity: 1;
	transform: scale(1);
}
@starting-style {
  .gal [popover]:popover-open {
    opacity: 0;
    transform: scale(0.3);
  }
}
.gal [popover]::backdrop {
  backdrop-filter: blur(3px);
  background: rgba(0,0,0,0.1);
}
.gal [popover] img {
	height: 100%;
	max-height: calc(100vh - 5vh);
	width: auto;
	margin: 0 20px;			/* либо у контейнера делай max-width меньше 100% - чтобы всегда был отступ от края окна */
	display: block;
	border: 1px solid #ccc;
}
@container scroll-state(scrollable: x) {
 .gal [popover] img {
	cursor: grab;
 }
}
.gal [popover]:popover-open .close {
	display: block;
	right: 35px;
	top: min(35px, 5vh);
	background-color: #ffffff99;
	animation: appear 1s ease-out .25s forwards; 
}
.gal [popover]:popover-open .close:active {
	border-color: var(--color-blue);
    background-color: var(--color-blue);
}
.content h3 {
    font-weight: 300;
    text-align: left;
    margin: 0 0 3vh;
    padding-top: 2vh;
}