.gba-error {
padding: 18px;
background: #fff3cd;
border-left: 4px solid #a1c214;
} .gba-slider-wrap {
position: relative;
width: 100%;
} .gba-slider {
--gba-pos: 50%;
position: relative;
width: 100%;
overflow: hidden;
background: #fff;
user-select: none;
touch-action: none;
box-shadow: 0 8px 25px rgba(0,0,0,.12);
}
.gba-slider::before {
content: "";
display: block;
padding-top: 56%;
} .gba-img,
.gba-after-wrap {
position: absolute;
inset: 0;
}
.gba-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
.gba-img-before {
z-index: 1;
}
.gba-after-wrap {
z-index: 2;
width: var(--gba-pos);
overflow: hidden;
transition: width .22s ease;
}
.gba-after-wrap .gba-img-after {
width: 100%;
height: 100%;
object-fit: cover;
max-width: none;
} .gba-handle {
position: absolute;
z-index: 10;
top: 0;
left: var(--gba-pos);
width: 64px;
height: 100%;
transform: translateX(-50%);
border: 0;
background: transparent;
padding: 0;
cursor: ew-resize;
transition: left .22s ease;
}
.gba-handle::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 5px;
height: 100%;
transform: translateX(-50%);
background: #a1c214;
}
.gba-handle span {
position: absolute;
top: 50%;
left: 50%;
width: 58px;
height: 58px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: #a1c214;
box-shadow: 0 8px 25px rgba(0,0,0,.22);
} .gba-label {
position: absolute;
z-index: 8;
top: 18px;
padding: 8px 13px;
border-radius: 999px;
background: rgba(0,0,0,.55);
color: #fff;
font-size: 14px;
line-height: 1;
pointer-events: none;
}
.gba-label-before {
right: 18px;
}
.gba-label-after {
left: 18px;
} .gba-toggle {
position: absolute;
z-index: 20;
top: 20px;
left: 20px;
display: flex;
align-items: center;
gap: 14px;
margin: 0;
padding: 12px 18px;
background: rgba(255,255,255,.92);
backdrop-filter: blur(10px);
border-radius: 999px;
color: #555;
font-size: 18px;
font-weight: 700;
line-height: 1;
box-shadow: 0 5px 20px rgba(0,0,0,.12);
}
.gba-toggle-btn {
position: relative;
width: 72px;
height: 38px;
border: 0;
border-radius: 999px;
background: #a1c214;
cursor: pointer;
padding: 0;
flex: 0 0 auto;
}
.gba-toggle-btn span {
position: absolute;
top: 4px;
left: 4px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #fff;
transition: transform .35s ease;
}
.gba-slider-wrap.is-after .gba-toggle-btn span {
transform: translateX(34px);
} .gba-combo {
display: grid;
grid-template-columns: minmax(260px, 34%) 1fr;
gap: clamp(24px, 4vw, 60px);
align-items: center;
}
.gba-combo.text-left .gba-copy {
order: 1;
}
.gba-combo.text-left .gba-combo-slider {
order: 2;
}
.gba-combo.text-right {
grid-template-columns: 1fr minmax(260px, 34%);
}
.gba-combo.text-right .gba-copy {
order: 2;
}
.gba-combo.text-right .gba-combo-slider {
order: 1;
} .gba-copy {
position: relative;
min-height: 180px;
}
.gba-copy-panel {
opacity: 0;
transform: translateY(8px);
transition: opacity .35s ease, transform .35s ease;
pointer-events: none;
}
.gba-copy-panel:not(:first-child) {
position: absolute;
inset: 0;
}
.gba-copy-panel.is-active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.gba-copy h3 {
margin-top: 0;
margin-bottom: 14px;
font-size: clamp(24px, 3vw, 42px);
line-height: 1.05;
}
.gba-copy p {
margin-bottom: 0.8em;
} .gba-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 28px;
margin-top: 20px;
background: #a1c214;
color: #fff !important;
text-decoration: none !important;
border-radius: 999px;
font-weight: 700;
line-height: 1;
transition: transform .3s ease, opacity .3s ease;
}
.gba-btn:hover {
transform: translateY(-2px);
opacity: .9;
} @media (max-width: 900px) {
.gba-combo,
.gba-combo.text-left,
.gba-combo.text-right {
display: flex !important;
flex-direction: column !important;
gap: 24px;
}
.gba-combo .gba-combo-slider,
.gba-combo.text-left .gba-combo-slider,
.gba-combo.text-right .gba-combo-slider {
order: 1 !important;
width: 100%;
}
.gba-combo .gba-copy,
.gba-combo.text-left .gba-copy,
.gba-combo.text-right .gba-copy {
order: 2 !important;
width: 100%;
margin-top: 0;
min-height: auto;
}
.gba-copy-panel {
position: relative !important;
inset: auto !important;
}
.gba-copy-panel:not(.is-active) {
display: none !important;
}
.gba-copy-panel.is-active {
display: block !important;
opacity: 1;
transform: none;
}
.gba-toggle {
top: 12px;
left: 12px;
gap: 10px;
padding: 10px 14px;
font-size: 14px;
}
.gba-toggle-btn {
width: 58px;
height: 32px;
}
.gba-toggle-btn span {
width: 24px;
height: 24px;
top: 4px;
left: 4px;
}
.gba-slider-wrap.is-after .gba-toggle-btn span {
transform: translateX(26px);
}
.gba-handle {
width: 54px;
}
.gba-handle span {
width: 46px;
height: 46px;
}
.gba-btn {
margin-top: 18px;
}
}
@media (max-width:900px){
.gba-combo{
display:block !important;
}
.gba-combo-slider{
display:block !important;
width:100%;
margin-bottom:24px;
}
.gba-copy{
display:block !important;
width:100%;
}
}