.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-shortcode.is-compact .gsm-ref-fullwidth {
margin-left: 0;
margin-right: 0;
width: 100%;
padding-top: 30px;
padding-bottom: 60px;
}   .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: 0;
border-radius: 999px;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
color: inherit;
}
.gsm-filter-btn:hover,
.gsm-filter-btn:focus {
text-decoration: none;
}
.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-shortcode.is-compact .gsm-ref-grid {
gap: 22px;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.gsm-ref-item {
position: relative;
overflow: hidden;
border-radius: 15px;
aspect-ratio: 4 / 3;
box-shadow: 0 0 7px 2px #0000001c;
margin: 0;
background: #f3f3f3;
}
.gsm-ref-link {
position: absolute;
inset: 0;
display: block;
color: inherit;
text-decoration: none;
}
.gsm-ref-link:focus {
outline: 3px solid rgba(43, 140, 205, .45);
outline-offset: 3px;
}
.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);
}   .gsm-ref-card-caption {
position: absolute;
left: .75rem;
right: .75rem;
bottom: .75rem;
z-index: 3;
display: grid;
gap: .18rem;
padding: .58rem .7rem .62rem;
border-radius: .65rem;
background: linear-gradient(135deg, rgba(3, 22, 48, .9), rgba(3, 22, 48, .74));
backdrop-filter: blur(8px);
color: #fff;
opacity: 0;
transform: translateY(7px);
transition:
opacity .18s ease,
transform .18s ease;
pointer-events: none;
}
.gsm-ref-item:hover .gsm-ref-card-caption,
.gsm-ref-item:focus-within .gsm-ref-card-caption {
opacity: 1;
transform: translateY(0);
}
.gsm-ref-card-caption strong {
display: block;
color: inherit;
font-size: .8rem;
line-height: 1.22;
font-weight: 700;
}
.gsm-ref-card-caption span {
display: -webkit-box;
overflow: hidden;
color: rgba(255, 255, 255, .9);
font-size: .76rem;
line-height: 1.28;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.gsm-ref-card-caption em {
display: inline-flex;
width: max-content;
max-width: 100%;
margin-top: .12rem;
padding: .12rem .42rem;
border-radius: 999px;
background: rgba(255, 255, 255, .14);
color: rgba(255, 255, 255, .86);
font-size: .66rem;
font-style: normal;
line-height: 1.25;
}   .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);
}
}
.gsm-ref-lightbox-source[hidden] {
display: none !important;
}
#gsm-swiper-modal .gsm-swiper-textbox {
position: absolute;
left: 50%;
bottom: 28px;
z-index: 1000001;
display: none;
width: min(92vw, 820px);
max-height: min(44vh, 430px);
overflow-y: auto;
overscroll-behavior: contain;
transform: translateX(-50%);
padding: .95rem 1.15rem 1.05rem;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 1rem;
background: rgba(3, 18, 38, .80) !important;
box-shadow: 0 12px 42px rgba(0, 0, 0, .24) !important;
color: #fff;
text-align: center;
line-height: 1.45;
backdrop-filter: blur(10px);
pointer-events: auto;
}
#gsm-swiper-modal .gsm-swiper-textbox__caption {
display: block;
color: #fff;
font-size: .98rem;
font-weight: 700;
}
#gsm-swiper-modal .gsm-swiper-textbox__description {
display: block;
max-width: 760px;
margin: .35rem auto 0;
color: rgba(255, 255, 255, .88);
font-size: .84rem;
line-height: 1.48;
}
#gsm-swiper-modal .gsm-swiper-textbox__link {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: .65rem;
padding: .42rem .8rem;
border: 1px solid rgba(255, 255, 255, .38);
border-radius: 999px;
background: transparent !important;
color: #fff;
font-size: .78rem;
font-weight: 700;
text-decoration: none;
}
#gsm-swiper-modal .gsm-swiper-textbox__link:hover,
#gsm-swiper-modal .gsm-swiper-textbox__link:focus {
border-color: rgba(255, 255, 255, .75);
color: #fff;
text-decoration: none;
}
@media (max-width: 767px) {
.gsm-ref-fullwidth {
padding-top: 34px;
padding-bottom: 80px;
}
.gsm-ref-grid {
gap: 22px;
}
.gsm-ref-item {
overflow: visible;
aspect-ratio: auto;
border-radius: 13px;
background: transparent;
box-shadow: none;
}
.gsm-ref-link {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
border-radius: 13px;
box-shadow: 0 0 7px 2px #0000001c;
background: #f3f3f3;
}
.gsm-ref-item:hover img {
transform: none;
}
.gsm-ref-card-caption {
position: static;
margin-top: .6rem;
padding: .72rem .8rem .78rem;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: .75rem;
background: rgba(3, 22, 48, .86);
color: #fff;
opacity: 1;
transform: none;
backdrop-filter: blur(8px);
}
.gsm-ref-card-caption strong {
color: #fff;
font-size: .86rem;
}
.gsm-ref-card-caption span {
color: rgba(255, 255, 255, .9);
font-size: .8rem;
}
.gsm-ref-card-caption em {
background: rgba(255, 255, 255, .12);
color: rgba(255, 255, 255, .82);
}
#gsm-swiper-modal .gsm-swiper-textbox {
bottom: 14px;
width: min(94vw, 620px);
max-height: 46vh;
padding: .78rem .88rem .86rem;
border-radius: .85rem;
text-align: left;
}
#gsm-swiper-modal .gsm-swiper-textbox__caption {
font-size: .88rem;
line-height: 1.38;
}
#gsm-swiper-modal .gsm-swiper-textbox__description {
margin-top: .4rem;
font-size: .78rem;
line-height: 1.45;
}
#gsm-swiper-modal .gsm-swiper-textbox__link {
margin-top: .55rem;
font-size: .74rem;
}
}