.sug-gallery {
    --sug-btn-bg: #0d6efd;
    --sug-all-btn-bg: #d82943;
    --sug-btn-color: #ffffff;
    --sug-btn-active: #212529;
    --sug-filter-tab-height: 44px;
    --sug-filter-tab-width: auto;
    --sug-filter-tab-border-width: 0px;
    --sug-filter-tab-border-style: solid;
    --sug-filter-tab-border-color: #0d6efd;
    --sug-filter-tab-active-border-color: #212529;
    --sug-filter-tab-radius: 2px;
    --sug-title-color: #111111;
    --sug-card-title-bg: #050505;
    --sug-desc-color: #1f2937;
    --sug-visit-bg: #5d77d4;
    --sug-visit-color: #ffffff;
    --sug-filter-font-family: "Poppins", "Segoe UI", sans-serif;
    --sug-filter-font-size: 14px;
    --sug-filter-font-weight: 600;
    --sug-filter-text-transform: none;
    --sug-filter-icon-size: 15px;
    --sug-filter-gap: 4px;
    --sug-title-font-family: "Poppins", "Segoe UI", sans-serif;
    --sug-title-font-size: 16px;
    --sug-title-font-weight: 500;
    --sug-title-text-transform: none;
    --sug-desc-font-family: "Poppins", "Segoe UI", sans-serif;
    --sug-desc-font-size: 14px;
    --sug-desc-font-weight: 400;
    --sug-visit-font-family: "Poppins", "Segoe UI", sans-serif;
    --sug-visit-font-size: 16px;
    --sug-visit-font-weight: 600;
    --sug-visit-text-transform: none;
    --sug-visit-icon-size: 17px;
    --sug-card-radius: 2px;
    --sug-grid-gap: 18px;
    --sug-image-ratio: 16 / 11;
    --sug-motion-duration: 320ms;
    --sug-motion-stagger: 70ms;
    --sug-filter-transition-duration: 260ms;
    --sug-button-hover-scale: 1.04;
    --sug-card-hover-lift: 6px;
    --sug-image-hover-zoom: 1.08;
    --sug-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
}

.sug-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sug-filter-gap);
    margin-bottom: 14px;
}

.sug-filter-btn {
    border: var(--sug-filter-tab-border-width) var(--sug-filter-tab-border-style) var(--sug-filter-tab-border-color);
    border-radius: var(--sug-filter-tab-radius);
    background: var(--sug-btn-bg);
    color: var(--sug-btn-color);
    padding: 11px 14px;
    height: var(--sug-filter-tab-height);
    width: var(--sug-filter-tab-width);
    line-height: 1;
    box-sizing: border-box;
    cursor: pointer;
    font-size: var(--sug-filter-font-size);
    font-family: var(--sug-filter-font-family);
    font-weight: var(--sug-filter-font-weight);
    text-transform: var(--sug-filter-text-transform);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform var(--sug-motion-duration) var(--sug-motion-easing), opacity var(--sug-motion-duration) var(--sug-motion-easing), background-color var(--sug-filter-transition-duration) var(--sug-motion-easing);
}

.sug-filter-btn:hover {
    transform: translateY(-1px) scale(var(--sug-button-hover-scale));
    opacity: 0.95;
}

.sug-filter-btn:active {
    transform: scale(0.98);
}

.sug-filter-btn[data-filter="all"] {
    background: var(--sug-all-btn-bg);
}

.sug-filter-btn.is-active {
    background: var(--sug-btn-active);
    border-color: var(--sug-filter-tab-active-border-color);
}

.sug-filter-icon {
    font-size: var(--sug-filter-icon-size);
    width: var(--sug-filter-icon-size);
    height: var(--sug-filter-icon-size);
}

.sug-filter-label {
    display: inline-block;
    vertical-align: middle;
}

.sug-filter-check {
    opacity: 0;
    margin-left: 4px;
    font-size: 15px;
    font-weight: 700;
    transform: scale(0.75);
    transition: opacity var(--sug-filter-transition-duration) var(--sug-motion-easing), transform var(--sug-filter-transition-duration) var(--sug-motion-easing);
}

.sug-filter-btn.is-active .sug-filter-check {
    opacity: 1;
    transform: scale(1);
}

.sug-gallery-grid {
    display: grid;
    gap: var(--sug-grid-gap);
    position: relative;
}

.sug-transition-clone {
    box-sizing: border-box;
    transform-origin: center center;
}

.sug-gallery.sug-ratio-auto .sug-gallery-grid {
    align-items: start !important;
    grid-auto-rows: auto !important;
}

.sug-gallery.sug-ratio-auto .sug-gallery-grid > .sug-gallery-item {
    align-self: start !important;
}

.sug-layout-cols-2 .sug-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sug-layout-cols-3 .sug-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sug-layout-cols-4 .sug-gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sug-layout-masonry .sug-gallery-grid {
    column-count: 3;
    column-gap: 16px;
    display: block;
}

.sug-layout-masonry .sug-gallery-item {
    display: inline-block;
    width: 100%;
    margin: 0 0 16px;
}

.sug-gallery-item {
    margin: 0;
    break-inside: avoid;
    background: #ffffff;
    border-radius: var(--sug-card-radius);
    overflow: hidden;
    box-shadow: 0 2px 7px rgba(7, 25, 51, 0.24);
    transition: transform var(--sug-motion-duration) var(--sug-motion-easing), opacity var(--sug-motion-duration) var(--sug-motion-easing), box-shadow var(--sug-motion-duration) var(--sug-motion-easing);
}

.sug-gallery.sug-ratio-auto .sug-gallery-item {
    height: auto !important;
}

.sug-gallery.sug-motion-on .sug-gallery-item:hover {
    box-shadow: 0 10px 26px rgba(7, 25, 51, 0.34);
}

.sug-image-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.sug-image-wrap {
    overflow: hidden;
    border-radius: 0;
    background: #e8ecf2;
    aspect-ratio: var(--sug-image-ratio);
}

.sug-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform var(--sug-motion-duration) var(--sug-motion-easing), opacity var(--sug-motion-duration) var(--sug-motion-easing), filter var(--sug-motion-duration) var(--sug-motion-easing);
}

.sug-layout-masonry .sug-image-wrap {
    aspect-ratio: var(--sug-image-ratio);
}

.sug-layout-masonry .sug-image-wrap img {
    height: 100%;
}

.sug-gallery.sug-ratio-auto .sug-image-wrap {
    aspect-ratio: auto;
}

.sug-gallery.sug-ratio-auto .sug-image-wrap img {
    height: auto;
}

.sug-caption {
    margin-top: 0;
    display: grid;
    gap: 0;
}

.sug-project-title {
    margin: 0;
    padding: 9px 14px;
    background: var(--sug-card-title-bg);
    color: var(--sug-title-color);
    text-align: center;
    font-size: var(--sug-title-font-size);
    font-weight: var(--sug-title-font-weight);
    letter-spacing: 0.3px;
    line-height: 1.2;
    font-family: var(--sug-title-font-family);
    text-transform: var(--sug-title-text-transform);
}

.sug-project-desc {
    margin: 0;
    padding: 10px 14px;
    color: var(--sug-desc-color);
    font-size: var(--sug-desc-font-size);
    line-height: 1.35;
    font-weight: var(--sug-desc-font-weight);
    text-align: center;
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-family: var(--sug-desc-font-family);
}

.sug-visit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: 0;
    background: var(--sug-visit-bg);
    color: var(--sug-visit-color);
    text-decoration: none;
    padding: 10px 14px;
    font-size: var(--sug-visit-font-size);
    line-height: 1;
    font-weight: var(--sug-visit-font-weight);
    text-transform: var(--sug-visit-text-transform);
    transition: opacity var(--sug-motion-duration) var(--sug-motion-easing), transform var(--sug-motion-duration) var(--sug-motion-easing);
    font-family: var(--sug-visit-font-family);
}

.sug-visit-btn:hover,
.sug-visit-btn:focus {
    color: var(--sug-visit-color);
    opacity: 0.92;
    transform: scale(var(--sug-button-hover-scale));
}

.sug-visit-btn:active {
    transform: scale(0.98);
}

.sug-visit-icon {
    font-size: var(--sug-visit-icon-size);
    width: var(--sug-visit-icon-size);
    height: var(--sug-visit-icon-size);
    line-height: 1;
}

.sug-gallery-item.is-hidden {
    display: none !important;
}

.sug-hover-zoom .sug-gallery-item:hover .sug-image-wrap img {
    transform: scale(var(--sug-image-hover-zoom));
}

.sug-hover-lift .sug-gallery-item {
    transition: transform var(--sug-motion-duration) var(--sug-motion-easing);
}

.sug-hover-lift .sug-gallery-item:hover {
    transform: translateY(calc(-1 * var(--sug-card-hover-lift)));
}

.sug-hover-fade .sug-gallery-item:hover .sug-image-wrap img {
    opacity: 0.75;
}

.sug-hover-grayscale .sug-image-wrap img {
    filter: grayscale(100%);
}

.sug-hover-grayscale .sug-gallery-item:hover .sug-image-wrap img {
    filter: grayscale(0);
}

.sug-hover-none .sug-gallery-item:hover .sug-image-wrap img,
.sug-hover-none .sug-gallery-item:hover {
    transform: none;
    opacity: 1;
    filter: none;
}

.sug-gallery.sug-motion-on.sug-js-ready .sug-gallery-item {
    opacity: 0;
    transform: translateY(12px);
}

.sug-gallery.sug-motion-on.sug-is-filtering .sug-gallery-item,
.sug-gallery.sug-motion-on.sug-is-filtering .sug-gallery-grid {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.sug-gallery.sug-motion-on.sug-js-ready .sug-gallery-item.sug-entered {
    opacity: 1;
    transform: translateY(0);
}

.sug-gallery-item.sug-filter-enter {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
}

.sug-gallery-item.sug-filter-enter.sug-filter-enter-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity var(--sug-filter-transition-duration) var(--sug-motion-easing), transform var(--sug-filter-transition-duration) var(--sug-motion-easing);
}

.sug-gallery-item.sug-filter-exit.sug-filter-exit-active {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transition: opacity var(--sug-filter-transition-duration) var(--sug-motion-easing), transform var(--sug-filter-transition-duration) var(--sug-motion-easing);
}

.sug-gallery.sug-motion-off .sug-filter-btn,
.sug-gallery.sug-motion-off .sug-gallery-item,
.sug-gallery.sug-motion-off .sug-image-wrap img,
.sug-gallery.sug-motion-off .sug-visit-btn,
.sug-gallery.sug-motion-off .sug-filter-check {
    transition-duration: 0ms !important;
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .sug-gallery .sug-filter-btn,
    .sug-gallery .sug-gallery-item,
    .sug-gallery .sug-image-wrap img,
    .sug-gallery .sug-visit-btn,
    .sug-gallery .sug-filter-check {
        transition-duration: 0ms !important;
        animation: none !important;
    }
}

@media (max-width: 1024px) {
    .sug-gallery.sug-responsive.sug-layout-cols-4 .sug-gallery-grid,
    .sug-gallery.sug-responsive.sug-layout-cols-3 .sug-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sug-gallery.sug-responsive.sug-layout-masonry .sug-gallery-grid {
        column-count: 2;
    }
}

@media (max-width: 680px) {
    .sug-gallery.sug-responsive.sug-layout-cols-2 .sug-gallery-grid,
    .sug-gallery.sug-responsive.sug-layout-cols-3 .sug-gallery-grid,
    .sug-gallery.sug-responsive.sug-layout-cols-4 .sug-gallery-grid {
        grid-template-columns: 1fr;
    }

    .sug-gallery.sug-responsive.sug-layout-masonry .sug-gallery-grid {
        column-count: 1;
    }

    .sug-filter-btn {
        padding: 9px 12px;
    }
}