.shg-gallery {
    --shg-columns: 3;
    --shg-gap: 18px;
    --shg-radius: 14px;

    display: grid;
    grid-template-columns: repeat(var(--shg-columns), minmax(0, 1fr));
    gap: var(--shg-gap);
    width: 100%;
}

.shg-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--shg-radius);
    background: #f4f4f4;
    aspect-ratio: 4 / 3;
    transform: translateZ(0);
    transition-property: transform, box-shadow, filter;
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(.22,.61,.36,1);
}

.shg-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition-property: transform, opacity, filter;
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(.22,.61,.36,1);
}

.shg-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: transparent;
    transition-property: background, opacity;
    transition-duration: 500ms;
    transition-timing-function: ease;
}

.shg-effect-zoom .shg-item:hover .shg-image {
    transform: scale(1.06);
}

.shg-effect-zoom .shg-item:hover {
    box-shadow: 0 16px 35px rgba(0,0,0,.12);
}

.shg-effect-lift .shg-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 35px rgba(0,0,0,.14);
}

.shg-effect-lift .shg-item:hover .shg-image {
    transform: scale(1.025);
}

.shg-effect-fade .shg-item:hover .shg-image {
    opacity: .88;
    transform: scale(1.02);
}

.shg-item:hover .shg-overlay {
    background: rgba(0,0,0,.10);
}

.shg-effect-none .shg-item:hover,
.shg-effect-none .shg-item:hover .shg-image {
    transform: none;
    box-shadow: none;
    opacity: 1;
}

@media (max-width: 1024px) {
    .shg-gallery {
        --shg-columns: 2;
    }
}

@media (max-width: 767px) {
    .shg-gallery {
        --shg-columns: 1;
        --shg-gap: 12px;
    }
}