:root{--color:#1e40af;--radius:8px;color:#454}body{overflow-x:hidden}.panel:nth-child(2){--color:#e35e60}.panel:nth-child(3){--color:#28ecbb}.panel:nth-child(4){--color:#1e3a8a}.panels{--page-w:280px;--page-h:calc(var(--page-w) * 99 / 70);grid-template-columns:repeat(3, calc(var(--page-w) * 2));transform-style:preserve-3d;justify-content:center;gap:40px;max-width:100%;padding:40px;display:grid;overflow:visible}@media (max-width:1800px){.panels{grid-template-columns:repeat(2, calc(var(--page-w) * 2))}}@media (max-width:1200px){.panels{grid-template-columns:repeat(1, calc(var(--page-w) * 2))}}@media (max-width:768px){.panels{--page-w:min(210px, (100vw - 50px) / 2);grid-template-columns:repeat(1, calc(var(--page-w) * 2));gap:25px;padding:20px}}@media (max-width:480px){.panels{--page-w:min(170px, (100vw - 40px) / 2);grid-template-columns:repeat(1, calc(var(--page-w) * 2));gap:20px;padding:15px}}.panel{width:var(--page-w);height:var(--page-h);max-width:calc(var(--page-w) * 2);perspective:600px;justify-self:center;transition:all 1s;display:flex}.panel:hover,.panel.open{width:calc(var(--page-w) * 2)}.panel:hover .page1,.panel.open .page1{margin-left:0;transform:rotateY(0)}[class^=page]{width:var(--page-w);height:var(--page-h);border:2px solid var(--color);border-radius:var(--radius);flex-direction:column;flex-shrink:0;justify-content:center;display:flex;overflow:hidden;box-shadow:0 2px 4px -2px #0000001a,0 4px 8px -4px #0000001f,0 8px 16px -8px #00000026,0 16px 24px -16px #0000002b,0 24px 48px -24px #00000040}.page1{margin-left:calc(-1 * var(--page-w));transform-origin:100%;transform-style:preserve-3d;background:var(--color);transition:all 1s;position:relative;transform:rotateY(180deg)}.front,.back{backface-visibility:hidden;width:100%;height:100%;position:absolute}.back{background:var(--color);border-radius:var(--radius);overflow:hidden}.back img{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.front{border-radius:var(--radius);background:#fff;justify-content:center;align-items:center;display:flex;overflow:hidden;transform:rotateY(180deg)}.front img{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.page2{background:#fff;flex-direction:column;justify-content:space-between;display:flex;overflow:hidden}.page2 h1{text-align:center;background:var(--color);color:#fff;border-radius:var(--radius) var(--radius) 0 0;-webkit-line-clamp:1;text-overflow:ellipsis;-webkit-box-orient:vertical;flex-shrink:0;margin:0;padding:20px 16px;font-size:1.5em;font-weight:500;line-height:1.3;display:-webkit-box;overflow:hidden}@media (max-width:768px){.page2 h1{-webkit-line-clamp:2;padding:12px 10px;font-size:1.1em;line-height:1.4}}@media (max-width:480px){.page2 h1{-webkit-line-clamp:2;padding:10px 8px;font-size:1em;line-height:1.4}}.page2 p{color:#333;margin:0;padding:20px;font-size:1em;line-height:1.6}@media (max-width:768px){.page2 p{padding:8px 12px;font-size:.9em;line-height:1.5}}@media (max-width:480px){.page2 p{padding:0 10px;font-size:.8em;line-height:1.4}}.page2>p:first-of-type{-webkit-line-clamp:8;text-overflow:ellipsis;color:#333;-webkit-box-orient:vertical;flex-grow:1;display:-webkit-box;overflow:hidden}@media (max-width:768px){.page2>p:first-of-type{text-overflow:clip;-webkit-line-clamp:7!important;-webkit-box-orient:vertical!important;flex-grow:0!important;flex-shrink:0!important;display:-webkit-box!important;overflow:hidden!important}}@media (max-width:480px){.page2>p:first-of-type{text-overflow:clip;-webkit-line-clamp:7!important;-webkit-box-orient:vertical!important;flex-grow:0!important;flex-shrink:0!important;display:-webkit-box!important;overflow:hidden!important}}.page2>p:last-of-type{flex-shrink:0;padding-bottom:24px}@media (max-width:768px){.page2>p:last-of-type{padding-bottom:15px}}@media (max-width:480px){.page2>p:last-of-type{padding-bottom:12px}}.button{text-transform:uppercase;letter-spacing:1px;color:#fff;background-color:var(--color);border-radius:4px;justify-content:center;padding:14px 20px;font-size:1em;font-weight:500;text-decoration:none;transition:opacity .3s;display:flex}.button:hover{opacity:.9}@media (max-width:768px){.button{letter-spacing:.8px;padding:12px 16px;font-size:.9em}}@media (max-width:480px){.button{letter-spacing:.6px;padding:11px 14px;font-size:.85em}}@media (prefers-reduced-motion:reduce){.panel,.page1,.panel:hover .page1,.panel.open .page1{transition:none}}