.gh-unfck-vertical { min-height: var(--gh-min-h, 400px); } .problem-section .container-narrow { max-width: 900px; } .gh-unfck-vertical.vertical-slider-wrapper{
display:flex; gap:30px;
align-items:center;
min-height:400px;
touch-action: pan-y;
} .gh-unfck-vertical.nav-right { flex-direction: row-reverse; } .gh-unfck-vertical.nav-left  { flex-direction: row; }  .gh-unfck-vertical.nav-right .slider-content { margin-left: 74px; margin-right: 0; }
.gh-unfck-vertical.nav-left  .slider-content { margin-right: 74px; margin-left:  0; } .gh-unfck-vertical .slider-navigation{
flex:0 0 50px;
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
align-self:stretch;
}
.gh-unfck-vertical .slider-track{
position:absolute;
top:0; bottom:0; left:50%;
width:2px;
background:#cfcfcf;
transform:translateX(-1px);
} .gh-unfck-vertical .slider-controls{
position:relative; z-index:2;
display:flex; flex-direction:column;
align-items:center; justify-content:space-between;
height:100%;
}
.gh-unfck-vertical .slider-control{
background:none !important; border:0 !important; cursor:pointer;
padding:10px; transition: transform .2s ease;
}
@media (hover:hover){
.gh-unfck-vertical .slider-control:hover{ transform: scale(1.12); }
} .gh-unfck-vertical .slider-dots{
list-style:none; margin:0; padding:0;
display:flex; flex-direction:column;
justify-content:space-between; align-items:center;
height:70%;
}
.gh-unfck-vertical .slider-dots li{ margin:0; }
.gh-unfck-vertical .slider-dots button{
width:12px; height:12px;
background:transparent;
border:2px solid var(--color-grey-light, #ddd);
border-radius:2px; padding:0; display:block;
transform: translateX(-1px); transition: background .2s ease, border-color .2s ease, transform .2s ease;
cursor:pointer;
}
.gh-unfck-vertical .slider-dots button:hover{ border-color: var(--color-blue-main, #0057FF); }
.gh-unfck-vertical .slider-dots button.active,
.gh-unfck-vertical .slider-dots button[aria-current="true"]{
background: var(--color-blue-main, #0057FF);
border-color: var(--color-blue-main, #0057FF);
transform: translateX(-1px) scale(1.1);
}
.gh-unfck-vertical .slider-dots button:focus-visible{
outline:2px solid #fff;
outline-offset:2px;
box-shadow:0 0 0 3px rgba(0,87,255,.35);
border-color: var(--color-blue-main, #0057FF);
} .gh-unfck-vertical .slider-content{ flex:1; text-align:center; margin-left: 74px; } .gh-unfck-vertical .slide{
display: none;
opacity: 0;
transform: translateY(12px);
transition: opacity var(--gh-speed, .5s) ease, transform var(--gh-speed, .5s) ease;
}
.gh-unfck-vertical .slide.active{
display: block;
opacity: 1;
transform: translateY(0);
} .mode-fade .slide       { transform: none; }
.mode-fade .slide.active{ opacity: 1; }
.mode-fade .slide:not(.active){ opacity: 0; } @media (prefers-reduced-motion: reduce){
.gh-unfck-vertical .slider-control, .gh-unfck-vertical .slider-dots button{ transition:none; }
.gh-unfck-vertical .slide{ animation:none; }
} .gh-unfck-vertical .slide .icon{
width:40px; height:30px; margin:0 auto 25px;
background:var(--color-blue-main, #0057FF);
box-shadow:-3px 3px 0 #E60023, 3px -3px 0 #0070F3;
}
.gh-unfck-vertical .slide h3{
font-family:var(--font-text, inherit);
font-style:italic;
font-size:1.8rem;
font-weight:500;
color:var(--color-black, #000);
margin-bottom:20px;
}
.gh-unfck-vertical .slide .quote-source{
margin:-10px 0 18px;
color:var(--color-grey-light, #6E6E6E);
font-size:.95rem; line-height:1.4;
}
.gh-unfck-vertical .slide .quote-source cite{ font-style:normal; }
.gh-unfck-vertical .slide .subtext{ color:var(--color-grey-light, #6E6E6E); }
@media (max-width: 768px){
.gh-unfck-vertical .slider-navigation{ flex-basis: 40px; }
.gh-unfck-vertical .slider-dots{ gap: 22px; }
.gh-unfck-vertical .slider-dots button{
width: 16px; height: 16px; border-width: 2px; transform: translateX(-1px);
}
.gh-unfck-vertical .slider-dots button.active,
.gh-unfck-vertical .slider-dots button[aria-current="true"]{
transform: translateX(-1px) scale(1.12);
}
.gh-unfck-vertical .slider-control{ padding: 8px; }
.gh-unfck-vertical .slider-control svg{ width: 20px; height: 20px; } .gh-unfck-vertical.nav-right .slider-content { margin-left: 20px; margin-right: 0; }
.gh-unfck-vertical.nav-left  .slider-content { margin-right: 20px; margin-left:  0; }
} .gh-unfck-vertical .slide {
transition: opacity var(--gh-speed, .5s) ease, transform var(--gh-speed, .5s) ease;
} .mode-fade .slide { transform: none; }
.mode-fade .slide.active { opacity: 1; }
.mode-fade .slide:not(.active) { opacity: 0; } .mode-slide .slide { opacity: 0; transform: translateY(12px); }
.mode-slide .slide.active { opacity: 1; transform: translateY(0); }