.smgfe-gallery {
    --smgfe-columns: 5;
    --smgfe-row-height: 165px;
    --smgfe-gap: 12px;
    --smgfe-hover-scale: 1.05;
    --smgfe-hover-lift: 8px;
    --smgfe-hover-rotate: 2deg;

    display: grid;
    grid-template-columns: repeat(var(--smgfe-columns), minmax(0, 1fr));
    grid-auto-rows: var(--smgfe-row-height);
    grid-auto-flow: dense;
    gap: var(--smgfe-gap);
    width: 100%;
    max-width: 100%;
}

.smgfe-item {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #f1f1f1;
    text-decoration: none;
    isolation: isolate;
}

.smgfe-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.smgfe-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1);
    filter: grayscale(0);
    transition: transform 380ms cubic-bezier(.22, 1, .36, 1), filter 320ms ease;
}

.smgfe-hover-zoom .smgfe-item:hover img,
.smgfe-hover-zoom .smgfe-item:focus img {
    transform: scale(var(--smgfe-hover-scale));
}

.smgfe-hover-lift .smgfe-item {
    transition: transform 280ms cubic-bezier(.22, 1, .36, 1), box-shadow 280ms ease;
}
.smgfe-hover-lift .smgfe-item:hover,
.smgfe-hover-lift .smgfe-item:focus {
    transform: translateY(calc(var(--smgfe-hover-lift) * -1));
    box-shadow: 0 18px 34px rgba(0,0,0,.18);
    z-index: 4;
}

.smgfe-hover-rotate .smgfe-item:hover img,
.smgfe-hover-rotate .smgfe-item:focus img {
    transform: scale(1.035) rotate(var(--smgfe-hover-rotate));
}

.smgfe-hover-dark_overlay .smgfe-item:hover::after,
.smgfe-hover-dark_overlay .smgfe-item:focus::after,
.smgfe-has-captions .smgfe-item:hover::after,
.smgfe-has-captions .smgfe-item:focus::after {
    opacity: 1;
}

.smgfe-hover-grayscale_color .smgfe-item img {
    filter: grayscale(1);
}
.smgfe-hover-grayscale_color .smgfe-item:hover img,
.smgfe-hover-grayscale_color .smgfe-item:focus img {
    filter: grayscale(0);
}

.smgfe-hover-none .smgfe-item::after {
    display: none;
}

.smgfe-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 16px;
    color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
    transform: translateY(8px);
    opacity: 0;
    transition: opacity 220ms ease, transform 220ms ease;
}

.smgfe-item:hover .smgfe-caption,
.smgfe-item:focus .smgfe-caption {
    transform: translateY(0);
    opacity: 1;
}

.smgfe-ratio-1x1 { grid-column: span 1; grid-row: span 1; }
.smgfe-ratio-2x1 { grid-column: span 2; grid-row: span 1; }
.smgfe-ratio-1x2 { grid-column: span 1; grid-row: span 2; }
.smgfe-ratio-2x2 { grid-column: span 2; grid-row: span 2; }
.smgfe-ratio-3x1 { grid-column: span 3; grid-row: span 1; }
.smgfe-ratio-1x3 { grid-column: span 1; grid-row: span 3; }

@media (max-width: 1024px) {
    .smgfe-responsive-simplify .smgfe-ratio-3x1 { grid-column: span 2; }
    .smgfe-responsive-simplify .smgfe-ratio-1x3 { grid-row: span 2; }
    .smgfe-responsive-simplify .smgfe-ratio-2x2 { grid-column: span 2; grid-row: span 2; }
}

@media (max-width: 767px) {
    .smgfe-responsive-simplify .smgfe-ratio-2x2,
    .smgfe-responsive-simplify .smgfe-ratio-3x1 {
        grid-column: span 2;
        grid-row: span 1;
    }

    .smgfe-responsive-simplify .smgfe-ratio-1x3 {
        grid-column: span 1;
        grid-row: span 2;
    }

    .smgfe-responsive-square_mobile .smgfe-item {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
}


/* v1.1 last-row helpers */
.smgfe-item.smgfe-last-row-item {
    min-width: 0;
}
.smgfe-last-row-center .smgfe-item.smgfe-last-row-first {
    grid-column-start: var(--smgfe-last-row-start, auto);
}


/* v1.2 viewport and final-row fill helpers */
.smgfe-gallery.smgfe-fill-viewport {
    min-height: 100vh;
    min-height: 100svh;
}

.smgfe-item.smgfe-fill-down {
    min-height: 0;
}