.Events{--height-year:4rem;--height-month:3rem;--top-spacing:1rem;container:events/inline-size}@container events (inline-size < 30rem){.Heading{flex-direction:column}}.Events :is(h2,h3){color:var(--color-white);margin-block:0;padding-inline:1rem;position:sticky}.Events :is(h2,h3){align-items:center;display:flex}.Events h2{background:var(--color-blue-200);block-size:var(--height-year);border-block-start:var(--top-spacing) solid var(--color-bg-main);inset-block-start:calc(var(--header-height));z-index:2}.Events h3{background:var(--color-blue-250);block-size:var(--height-month);font-size:1rem;inset-block-start:calc(var(--header-height) + var(--height-year) + var(--top-spacing));z-index:1}.Events-months{margin-block-start:1rem}.Events-list{padding-block:2rem}.Events-month:last-child .Events-list{padding-block-end:calc(2rem - var(--top-spacing))}.Event{display:flex;flex-direction:column;scroll-margin-block-start:calc(var(--height-year) + var(--height-month) + var(--top-spacing))}.Event address{font-size:.875em}.Event a{font-weight:500;justify-self:end;word-break:break-word}.Event-header{align-items:start;display:flex;gap:1.5rem;justify-content:space-between}.Event-header>div{flex-shrink:0}.Event-content{display:flex;flex-direction:column;gap:1em}.Event-content p{margin-block:0}.Event-days{color:var(--color-secondary);font-weight:500}.Event-attend{align-items:center;display:flex;font-size:.875rem;gap:1rem;justify-content:space-between}.Event .Button .IconSymbol{--size:1em;block-size:var(--size);inline-size:var(--size);transform:scale(1.2)}