/* Supplied platform artwork around the unchanged public Media cards. */
#media.media-scene{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:auto;
  padding:clamp(90px,7vw,128px) 0;
  background:radial-gradient(ellipse at 50% 45%,rgba(83,9,23,.12),transparent 68%),#050609;
}
#media.media-scene > .container.media-composition{
  width:min(1920px,calc(100% - 48px));
  display:grid;
  grid-template-columns:clamp(280px,22vw,440px) minmax(0,900px) clamp(280px,22vw,440px);
  grid-template-areas:"youtube-art content discord-art" "twitch-art content telegram-art";
  gap:28px clamp(20px,2vw,40px);
  align-items:center;
  justify-content:center;
}
#media .media-content{grid-area:content;position:relative;z-index:2;min-width:0}
#media .center-head{max-width:880px;margin:0 auto 40px}
#media .center-head h2{font-size:clamp(2.4rem,3.6vw,4rem);text-wrap:balance}
#media .media-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"youtube discord" "twitch telegram";gap:18px}
#media [data-media-platform="youtube"]{grid-area:youtube}
#media [data-media-platform="discord"]{grid-area:discord}
#media [data-media-platform="twitch"]{grid-area:twitch}
#media [data-media-platform="telegram"]{grid-area:telegram}
#media .media-card{position:relative;min-width:0;display:flex;flex-direction:column;background:linear-gradient(150deg,rgba(25,17,23,.94),rgba(9,10,14,.97))}
#media .media-card h3{font-size:clamp(1.05rem,1.3vw,1.28rem);overflow-wrap:anywhere}
#media .media-card p{flex:1}
#media .media-link{align-self:flex-start}
#media .media-art{
  position:relative;
  z-index:0;
  isolation:isolate;
  width:100%;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  pointer-events:none;
  animation:mediaArtworkFloat 23s ease-in-out infinite alternate;
}
#media .media-art::before{
  content:"";position:absolute;inset:-8%;z-index:-1;
  background:radial-gradient(ellipse,rgba(161,9,27,.14),rgba(101,6,21,.055) 44%,transparent 70%);
}
#media .media-art img{
  display:block;width:100%;height:auto;max-height:100%;object-fit:contain;
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  filter:brightness(1);
  transition:filter .5s ease,transform .5s ease;
}
#media .media-art-youtube{grid-area:youtube-art;animation-duration:23s}
#media .media-art-discord{grid-area:discord-art;animation-duration:29s;animation-delay:-9s}
#media .media-art-twitch{grid-area:twitch-art;animation-duration:19s;animation-delay:-5s}
#media .media-art-telegram{grid-area:telegram-art;animation-duration:27s;animation-delay:-14s}
@keyframes mediaArtworkFloat{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
@media(hover:hover) and (min-width:821px){
  #media:has([data-media-platform="youtube"]:is(:hover,:focus-within)) .media-art-youtube img,
  #media:has([data-media-platform="discord"]:is(:hover,:focus-within)) .media-art-discord img,
  #media:has([data-media-platform="twitch"]:is(:hover,:focus-within)) .media-art-twitch img,
  #media:has([data-media-platform="telegram"]:is(:hover,:focus-within)) .media-art-telegram img{filter:brightness(1.14);transform:scale(1.015)}
}
@media(max-width:1199px) and (min-width:821px){
  #media.media-scene > .container.media-composition{grid-template-columns:clamp(150px,19vw,220px) minmax(0,1fr) clamp(150px,19vw,220px);gap:24px 16px}
  #media .center-head h2{font-size:clamp(2rem,3.5vw,2.6rem)}
  #media .media-card{padding:20px}
  #media .media-card p{font-size:.9rem;min-height:0}
}
@media(max-width:820px){
  #media.media-scene{padding:72px 0 80px}
  #media.media-scene > .container.media-composition{
    width:calc(100% - 36px);
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"heading heading" "youtube-art twitch-art" "youtube twitch" "discord-art telegram-art" "discord telegram";
    gap:20px 16px;align-items:stretch;
  }
  #media .media-content,#media .media-grid{display:contents}
  #media .center-head{grid-area:heading;position:relative;z-index:2;margin:0 0 10px}
  #media .center-head h2{font-size:clamp(2rem,6.7vw,3rem)}
  #media .media-art{width:min(100%,230px);justify-self:center;animation:none}
  #media .media-card{z-index:2;padding:24px}
  #media .media-art img{transition:none}
}
@media(max-width:560px){
  #media.media-scene > .container.media-composition{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"heading" "youtube-art" "youtube" "twitch-art" "twitch" "discord-art" "discord" "telegram-art" "telegram";
    row-gap:18px;
  }
  #media .media-art{width:190px;margin-top:12px}
  #media .media-card h3{font-size:1.2rem}
  #media .media-card p{min-height:0}
}
@media(prefers-reduced-motion:reduce){
  #media .media-art,#media .reveal{animation:none!important;transform:none!important;transition:none!important}
  #media .reveal{opacity:1}
  #media .media-card,#media .media-art img{transition:none!important;transform:none!important}
}