:root{color-scheme:light dark}.activities-widget{container:activities-widget / inline-size;inline-size:min(100%, 425px);margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1lh auto auto;gap:.5rem 2rem;padding:2rem}.activities-widget>*{grid-area:1 / 1 / 1 / 1}.activities-widget>.activity{display:grid;grid-template-rows:subgrid;grid-template-columns:subgrid;grid-column:1 / -1;grid-row:1 / -1}.activities-widget .img{grid-column:1 / 2;grid-row:1 / 4;width:100%;aspect-ratio:1;overflow:clip;border-radius:8px;border:3px solid #fff;box-shadow:0 0 5px rgb(0 0 0 / .2);rotate:var(--imgRotate,0deg);transition:0.2s}.activities-widget .img img{width:100%;height:100%;object-fit:cover;display:block}.activities-widget .text{grid-column:2 / 3;grid-row:2 / 3;color:rgb(30 30 30 / .6);opacity:0;translate:0 20px;transition:0.5s cubic-bezier(.85,0,.15,1);pointer-events:none}.activities-widget .text h3{color:#000;margin:0 0 .5rem 0;font-size:2.1rem;font-weight:600}.activities-widget .activity.active .text{opacity:1;translate:0 0;pointer-events:all}.activities-widget .activity.active .img{animation:0.66s moveOutIn cubic-bezier(.34,1.56,.64,1) forwards}.activities-navigation{grid-column:2 / 3;grid-row:3 / 4;place-self:end;z-index:99}.activities-navigation button{border:1px solid #000;background:none;border-radius:50px;aspect-ratio:1;width:40px;height:40px;cursor:pointer;font-size:18px}.activities-navigation button:hover{background:#000;color:#fff}.activities-count{grid-column:2 / -1;place-self:start;z-index:99;color:#020202;font-size:1.875rem}@keyframes moveOutIn{50%{translate:-100% 0;scale:1.15}100%{translate:0 0;z-index:1}}@keyframes straightenImages{50%{--imgRotate:0deg}}@container activities-widget (width < 300px){.activities-widget{padding:1rem}.activities-widget>.activity{display:block!important;margin-bottom:2rem}.activities-widget .img{max-width:125px;margin:0 auto .5rem}.activities-widget .text{opacity:1!important;translate:0 0!important}.activities-navigation,.activities-count{display:none}}@media (prefers-color-scheme:dark){.activities-widget .img{border-color:#333}.activities-widget .text{color:rgb(240 240 240 / .6)}.activities-widget .text h3{color:#fff}.activities-navigation button{border-color:#fff}.activities-count{color:rgb(240 240 240 / .6)}}