body:has(.active-mobile){overflow:hidden}body:has(.active-mobile):after{background:rgba(0,0,0,.5);content:"";height:100%;left:0;position:fixed;top:0;width:100%;z-index:99}section.card-grid{display:grid;gap:2rem;grid-template-columns:repeat(3,minmax(0,1fr));height:var(--grid-height);position:relative;@media (max-width:1100px){grid-template-columns:minmax(0,1fr);height:auto}}section.card-grid:has(.active) .card:not(.active){opacity:0;pointer-events:none}.card{--border-radius:12px;--padding:40px;align-self:flex-start;background:#fff;border-radius:var(--border-radius);box-shadow:0 4px 8px rgba(0,0,0,.1);grid-row:1;height:var(--height);left:var(--left);opacity:1;position:relative;transition:transform .5s ease-in-out;transition:left 1s ease-in-out,opacity .5s ease-in-out;width:var(--width);z-index:2;@media (max-width:1100px){grid-row:auto;z-index:auto}&:first-child{grid-column:1;@media (max-width:1100px){grid-column:unset}}&:nth-child(2){grid-column:2;@media (max-width:1100px){grid-column:unset}}&:nth-child(3){grid-column:3;@media (max-width:1100px){grid-column:unset}}&.active{grid-column:1;left:0;opacity:1;position:absolute;z-index:3}}.card__header{background:linear-gradient(90deg,#104480,#456fad);border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);padding:var(--padding)}.card__header h2,.card__header p{color:#fff}.card__content{background:#fff;border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);padding:var(--padding);button{background:#1565c0;border:none;border-radius:5px;color:#fff;cursor:pointer;margin-top:1.5rem;padding:10px 20px}}.card__content{ul{list-style:none;margin:0;padding:0}li{margin-bottom:.5rem;padding-left:1.5rem;position:relative;&:before{--height:22px;background-color:#2fc974;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMSIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDExIDEwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjIwIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0xIDUuOTE3IDQuMzMzIDl2MEwxMCAxdjAiLz48L3N2Zz4=");background-position:50%;background-repeat:no-repeat;border-radius:calc(var(--height)/2);content:"";height:var(--height);left:0;position:absolute;top:2px;width:var(--height)}}}.card__panel{background:#fff;left:100%;max-height:100%;max-width:0;overflow:hidden;position:absolute;top:50%;transform:translateY(-50%);transition:none;width:100vw;z-index:-1;@media (max-width:1100px){left:50%;max-height:unset;opacity:0;top:0;transform:translateX(-50%)}h3{opacity:0;@media (max-width:1100px){opacity:1}}ul{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;opacity:0;padding:0;@media (max-width:1100px){opacity:1}&:not(:last-child){margin-bottom:1.5rem}li{background-color:#ecf2fd;border-radius:calc(var(--border-radius)/2);padding:10px 10px 10px 1.75rem;position:relative;&:before{background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBkPSJNMjU2IDgwVjQ4aC02NHYxNzZIMTZ2NjRoMTc2djE3Nmg2NFYyODhoMTc2di02NEgyNTZ6IiBzdHlsZT0iZmlsbDojMWYzMjRlIi8+PC9zdmc+") 0 0 /contain no-repeat;content:"";height:1rem;left:.5rem;position:absolute;top:50%;transform:translateY(-50%);width:1rem}}}ul.exclusive{li{background-color:#d5fbe6}}}.card__panel-close{display:none;@media (max-width:1100px){background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tIUZvbnQgQXdlc29tZSBQcm8gNi43LjIgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UgKENvbW1lcmNpYWwgTGljZW5zZSkgQ29weXJpZ2h0IDIwMjUgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTQxIDM5Yy05LjQtOS4zLTI0LjYtOS4zLTM0IDBzLTkuMyAyNC42IDAgMzRsMTgzIDE4M0w3IDQzOWMtOS40IDkuNC05LjQgMjQuNiAwIDMzLjlzMjQuNiA5LjQgMzMuOSAwbDE4My0xODNMNDA3IDQ3M2M5LjQgOS40IDI0LjYgOS40IDMzLjkgMHM5LjQtMjQuNiAwLTMzLjlsLTE4My0xODNMNDQxIDczYzkuNC05LjQgOS40LTI0LjYgMC0zMy45cy0yNC42LTkuNC0zMy45IDBsLTE4MyAxODN6IiBjbGFzcz0iZmEtcHJpbWFyeSIvPjwvc3ZnPg==") 50% /50% no-repeat #fff;border:0;cursor:pointer;display:grid;height:40px;place-content:center;position:absolute;right:.5rem;top:.5rem;width:40px}}.card__panel-content{border-radius:var(--border-radius);padding:40px;white-space:nowrap}.active .card__panel{box-shadow:0 4px 8px rgba(0,0,0,.1);max-width:var(--max-width);transition:max-width .5s ease-in-out .275s;h3,ul{opacity:1;transition:opacity .275s ease-in-out .75s}}.active-mobile{.card__panel{left:50%;max-width:100vw;opacity:1;overflow:visible;position:absolute;top:0;transform:translateX(-50%);width:calc(100vw - 2rem);z-index:100}}