@layer components{.social-links{justify-content:center;align-items:center;gap:1rem;margin:0;padding:0;list-style:none;display:flex}.social-link{display:block}@keyframes gentle-pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.social-link .social-icon{transition:transform .2s,filter .2s}@media (hover:hover) and (prefers-reduced-motion:no-preference){.social-icon:hover{animation:.8s ease-in-out infinite gentle-pulse}}.social-instagram:hover{filter:drop-shadow(0 0 3px #e1306c66)}.social-tiktok:hover{filter:drop-shadow(0 0 3px #0006)}.social-twitch:hover{filter:drop-shadow(0 0 3px #6441a466)}.social-rss:hover{filter:drop-shadow(0 0 3px #ee802f66)}.content{max-width:1600px;margin:0 auto 2rem;padding:0 1rem;container:content-column/inline-size}@media screen and (width<=860px){.content{margin:0 1.5rem 2rem;padding:0}}.heading{text-align:center;margin:2rem 0 .75rem;font-size:1.3rem;line-height:normal}.heading__title{margin:0 0 .3rem;font-size:2.2em}.heading__text{color:var(--text-light);max-width:800px;margin:0 auto;font-size:1.6rem;line-height:1.5}.heading__anchor{color:var(--text)}.heading__link{color:var(--link);font-weight:500}@media screen and (width<=860px){.heading{margin:1.5rem 0 1.75rem;font-size:1.2rem}.heading__title{font-size:2em}.heading__text{font-size:1.3rem}}.social-media{margin:1.25rem 0 1.5rem}:root{--card-size:370px}.grid{grid-template-columns:repeat(auto-fit, minmax(0, var(--card-size)));justify-content:center;gap:1.5rem;margin:0 2rem;display:grid}.card{inline-size:min(100%, var(--card-size));aspect-ratio:1;border-radius:var(--radius);background-color:var(--primary);box-shadow:var(--box-shadow);grid-template-areas:"card";display:grid;overflow:hidden}.card>*{grid-area:card}.grid>a{transition:transform var(--transition-duration) var(--transition-timing);scroll-margin-block:1.5rem}.grid>a:is(:hover,:focus-visible){text-decoration:none;transform:scale(1.05)}.card__picture{display:block}.card__image{object-fit:cover;block-size:100%;inline-size:100%;display:block}.card__content{text-align:start;color:var(--primary-text);text-shadow:0 2px 3px #0000004d;align-self:end;padding:1rem}.card__content--overlay{background-image:linear-gradient(#0000,#0a0a0a)}.card__title{margin:0;font-size:1.6rem;line-height:1.3}@media screen and (width>=1920px){.grid{grid-template-columns:repeat(4, var(--card-size))}}@container content-column (829px<=width<=1168px){.grid{grid-template-columns:repeat(2, var(--card-size))}}@container content-column (width<=828px){.grid{margin:0}.card__title{font-size:1.9rem}}}
