.gsm-ref-item {
transition:
opacity .25s ease,
transform .25s ease;
}   .gsm-ref-fullwidth {
position: relative;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: 100vw;
padding-top: 50px;
padding-bottom: 140px;
overflow: hidden;
}   .gsm-ref-filter-shell {
position: relative;
} .gsm-ref-filter-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.gsm-ref-filter-wrapper::-webkit-scrollbar {
display: none;
} .gsm-ref-filter {
display: flex;
gap: 12px;
width: max-content;
padding-bottom: 16px;
}
.gsm-filter-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 999px;
cursor: pointer;
white-space: nowrap;
border: 0;
}
.gsm-filter-btn.active {
background: #2B8CCD;
color: #fff;
}
.gsm-filter-btn .count {
opacity: .6;
font-size: .85em;
} @media (max-width: 768px) {
.gsm-filter-btn .count {
display: none;
}
}   .gsm-ref-filter-scrollbar {
height: 4px;
background: rgba(0, 0, 0, .08);
border-radius: 2px;
overflow: hidden;
}
.gsm-ref-filter-scrollbar span {
display: block;
height: 100%;
width: 30%;
background: rgba(0, 0, 0, .35);
border-radius: 2px;
transform: translateX(0);
}   .gsm-ref-grid {
display: grid;
gap: 30px;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.gsm-ref-item {
position: relative;
overflow: hidden;
border-radius: 15px;
aspect-ratio: 4 / 3;
box-shadow: 0 0 7px 2px #0000001c;
}
.gsm-ref-item img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform .35s ease;
display: block;
}
.gsm-ref-item:hover img {
transform: scale(1.06);
}   .swiper-zoom-container,
.swiper-zoom-container * {
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
}
#gsm-swiper-modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
z-index: 999999;
display: none;
align-items: center;
justify-content: center;
overflow: hidden !important;
touch-action: none;
-webkit-touch-callout: none;
}
#gsm-swiper-modal * {
background: transparent !important;
box-shadow: none !important;
}
#gsm-swiper-modal img {
max-width: 100vw !important;
max-height: 100vh !important;
object-fit: contain !important;
background: transparent !important;
}
.swiper,
.swiper-wrapper,
.swiper-slide {
background: transparent !important;
touch-action: pan-y pinch-zoom;
}
.swiper-slide {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100vh !important;
background: transparent !important;
}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: flex !important;
justify-content: center !important;
align-items: center !important;
overflow: hidden;
background: transparent !important;
} .swiper-slide>div,
.swiper-slide>* {
pointer-events: auto !important;
}
.swiper-pagination,
.swiper-button-next,
.swiper-button-prev {
z-index: 1000000 !important;
}
.gsm-ref-loader {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: #f3f3f3;
z-index: 2;
pointer-events: none;
}
.gsm-ref-item.is-loaded .gsm-ref-loader {
opacity: 0;
visibility: hidden;
transition: opacity .2s ease;
}
.gsm-ref-loader::after {
content: '';
width: 26px;
height: 26px;
border: 3px solid #d0d0d0;
border-top-color: #2B8CCD;
border-radius: 50%;
animation: gsm-spin .8s linear infinite;
}
@keyframes gsm-spin {
to {
transform: rotate(360deg);
}
}