.effect-preview{width:100%;position:relative;overflow:hidden}.effect-preview :is(.effect-preview-poster,.effect-preview-video){width:100%;height:100%;position:absolute;inset:0}.effect-preview-toggle{z-index:3;color:#fff;opacity:0;cursor:pointer;background:#101416e8;border:1px solid #ffffff85;border-radius:50%;place-items:center;width:36px;height:36px;display:grid;position:absolute;bottom:12px;right:12px}.effect-preview:hover .effect-preview-toggle,.effect-preview:focus-within .effect-preview-toggle,.effect-related-card:hover .effect-preview-toggle,.effect-related-card:focus-within .effect-preview-toggle{opacity:1}.effect-preview-toggle:focus-visible{outline:3px solid var(--ramp-yellow,#f5d742);outline-offset:3px}@media (hover:none),(pointer:coarse){.effect-preview-toggle{opacity:1;width:44px;height:44px}}.effect-related-grid{grid-template-columns:minmax(0,1fr);gap:20px;display:grid}.effect-related-card{border:1px solid var(--ramp-line);background:var(--ramp-panel);border-radius:12px;min-width:0;position:relative;overflow:hidden}.effect-related-card:hover{border-color:#777541}.effect-related-card h3{margin:0;font-size:15px;line-height:1.35}.effect-related-card h3 a{justify-content:space-between;align-items:center;gap:14px;height:64px;padding:12px 16px;display:flex}.effect-related-card h3 a:after{z-index:2;content:"";border-radius:12px;position:absolute;inset:0}.effect-related-card h3 a:focus-visible{outline:none}.effect-related-card h3 a:focus-visible:after{outline:2px solid var(--ramp-yellow,#f5d742);outline-offset:-3px}.effect-related-card h3 span{color:var(--ramp-yellow);flex-shrink:0}.effect-case-grid.effect-case-grid-paired{grid-template-columns:minmax(0,1fr);gap:36px;display:grid}.effect-case-grid-paired h3{margin:0 0 16px;font-size:20px}.effect-case-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}.effect-case-pair figure{min-width:0;margin:0}.effect-case-pair :is(a,.effect-preview){aspect-ratio:4/3;background:#090b0d;border-radius:12px;display:block;overflow:hidden}.effect-case-pair a:focus-visible{outline:3px solid var(--ramp-yellow,#f5d742);outline-offset:3px}.effect-case-pair img{object-fit:contain;width:100%;height:100%;display:block}.effect-case-pair figcaption{color:var(--ramp-muted);margin-top:9px;font-size:12px}.effect-case-description{color:var(--ramp-muted);margin:14px 0 0;font-size:14px;line-height:1.65}@media (width<=600px){.effect-case-pair{grid-template-columns:minmax(0,1fr);gap:16px}}.effect-case-card>.effect-preview{border-radius:12px}.effect-case-caption{align-items:flex-start;gap:18px;padding-top:18px;display:flex}.effect-case-caption figure{flex:0 0 76px;margin:0}.effect-case-caption img{border-radius:6px;width:76px;height:auto;display:block}.effect-case-caption figcaption{color:var(--ramp-muted);margin-top:5px;font-size:11px}.effect-case-caption h3{margin:0 0 8px;font-size:18px}.effect-case-caption p{color:var(--ramp-muted);margin:0;font-size:14px;line-height:1.65}@media (width>=640px){.effect-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=1100px){.effect-related-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.effect-case-grid{align-items:flex-start;gap:24px;display:flex}.effect-case-card{min-width:0}@media (width<=1023px){.effect-case-grid{flex-direction:column}.effect-case-card{width:100%;flex-basis:auto!important}}