.gallery div {
    flex: auto;
    width: 220px;
    margin: .5vw
}

.gallery div img {
    width: 100%;
    height: auto;
    box-shadow: .3rem .4rem .4rem rgba(0, 0, 0, 0.4);
    transition: transform 400ms ease-out
}

.gallery div img:hover {
    transform: scale(1.15)
}

.gallery .photo:hover {
    background: no-repeat center/20% url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m28.34 24.12-6.5-6.85A10.49 10.49 0 1 0 12.5 23h.55a1 1 0 1 0-.1-2 8.5 8.5 0 1 1 5.4-2.32A8.72 8.72 0 0 1 16.53 20a1 1 0 0 0-.41 1.35.89.89 0 0 0 .36.36v.08l6.77 7.13A3.48 3.48 0 0 0 25.73 30h.09a3.43 3.43 0 0 0 2.39-1 3.47 3.47 0 0 0 .13-4.88zm-1.5 3.47a1.45 1.45 0 0 1-1.06.41 1.51 1.51 0 0 1-1-.46l-6.15-6.49a10.07 10.07 0 0 0 1.14-.93 10.54 10.54 0 0 0 1-1.12l6.16 6.5a1.47 1.47 0 0 1-.09 2.09z"/><path d="M8.55 8.16a1 1 0 0 0-1.39.29 7.19 7.19 0 0 0 1.17 9.29A1 1 0 0 0 9 18a1 1 0 0 0 .67-1.74A5.32 5.32 0 0 1 8 12.91a5.24 5.24 0 0 1 .84-3.36 1 1 0 0 0-.29-1.39z"/></svg>');
    opacity: 1
}

.gallery img:hover {
    opacity: .5
}

.carousel-item,
.carousel-item .bg-dark {
    min-block-size: 300px
}

.carousel-item img.h-auto {
    height: 100% !important;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    border-radius: 0
}

.lightbox-caption {
    --bg-opacity: 1;
    background-color: var(--dark);
}

.modal-backdrop.show {
    opacity: .8
}

@media screen and (max-width: 400px) {
    .gallery div {
        margin: 0
    }

    .gallery {
        padding: 0
    }
}