.sx-covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sx-cover { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(300px, 28vw, 380px); overflow: hidden; border: 1px solid var(--line); color: inherit; text-decoration: none; isolation: isolate; transition: border-color .3s, transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s; }
.sx-cover:hover, .sx-cover:focus-visible { transform: translateY(-5px); outline: none; }
.sx-cover__txt { position: relative; z-index: 2; display: grid; align-content: end; gap: 12px; padding: clamp(18px, 2.4vw, 30px); }
.sx-cover__txt small { font: 700 11px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.sx-cover__txt > span { max-width: 300px; font-size: 14px; line-height: 1.45; opacity: .85; }
.sx-cover__txt em { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; font: 700 11px/1 var(--f-ui); font-style: normal; letter-spacing: .16em; text-transform: uppercase; }
.sx-cover__txt em i { padding: 11px 15px; font-style: normal; transition: transform .3s; }
.sx-cover:hover .sx-cover__txt em i { transform: translateX(4px); }
.sx-cover__art { position: relative; z-index: 1; overflow: hidden; }
.cv-p { position: absolute; width: 58%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .75); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.cv-p--0 { right: 16%; top: 50%; z-index: 3; transform: translateY(-50%) rotate(-3deg); }
.cv-p--1 { right: -8%; top: 10%; z-index: 2; transform: rotate(6deg) scale(.8); }
.cv-p--2 { right: 40%; bottom: -12%; z-index: 1; transform: rotate(-9deg) scale(.68); }
.sx-cover:hover .cv-p--0 { transform: translateY(-53%) rotate(-1deg) scale(1.04); }
.sx-cover:hover .cv-p--1 { transform: rotate(8deg) scale(.82); }

.sx-cover--hq { background: radial-gradient(80% 90% at 80% 40%, rgba(255, 42, 20, .3), transparent 65%), linear-gradient(160deg, #140707, #050303); color: var(--ink); }
.sx-cover--hq:hover { border-color: rgba(255, 60, 40, .6); box-shadow: 0 30px 80px -40px rgba(255, 42, 20, .7); }
.sx-cover--hq em i { background: var(--red); color: #fff; }
.cv-led { position: absolute; left: -4%; top: 50%; transform: translateY(-50%); font: 700 clamp(150px, 17vw, 250px)/.8 Karantina, var(--f-display); color: rgba(255, 42, 20, .14); text-shadow: 0 0 40px rgba(255, 42, 20, .25); letter-spacing: -.02em; }
.sx-cover--lodge { background: linear-gradient(90deg, rgba(20, 10, 4, .55), rgba(20, 10, 4, .1)), repeating-linear-gradient(90deg, rgba(40, 15, 0, .07) 0 2px, transparent 2px 37px, rgba(255, 220, 170, .05) 37px 38px, transparent 38px 91px), repeating-linear-gradient(180deg, transparent 0 76px, rgba(60, 25, 5, .22) 76px 152px, transparent 152px 228px, rgba(255, 200, 140, .06) 228px 304px), repeating-linear-gradient(180deg, #1e1007 0 4px, #4e2b12 4px 9px, #8a552a 18px, #b97c45 28px, #cf9459 34px, #b67a43 42px, #8c5629 54px, #5a3216 66px, #2c170a 72px, #1e1007 76px); color: #f3e7cf; border-color: rgba(243, 231, 207, .18); }
.sx-cover--lodge:hover { border-color: rgba(243, 231, 207, .5); box-shadow: 0 30px 80px -40px rgba(255, 170, 80, .45); }
.sx-cover--lodge em i { background: #1f3d2b; color: #f3e7cf; }
.sx-cover--lodge .cv-p { border: 8px solid #efe4cf; border-bottom-width: 26px; }
.sx-cover--jam { background: radial-gradient(rgba(26, 14, 46, .12) 1.3px, transparent 1.5px) 0 0 / 14px 14px, radial-gradient(60% 70% at 70% 50%, #fff3a8, transparent 70%), linear-gradient(150deg, #ffe14d, #ffbf1f); color: #1a0e2e; border: 3px solid #1a0e2e; }
.sx-cover--jam:hover { box-shadow: 8px 8px 0 #1a0e2e; }
.sx-cover--jam .sx-cover__art { overflow: visible; }
.sx-cover--jam em i { background: #ff3ea5; color: #fff; border: 2px solid #1a0e2e; border-radius: 99px; box-shadow: 3px 3px 0 #1a0e2e; }
.cv-jar { position: absolute; width: 31%; filter: drop-shadow(0 18px 18px rgba(26, 14, 46, .35)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.cv-jar--a { left: 7%; top: 20%; transform: rotate(-12deg); }
.cv-jar--b { left: 33%; top: 6%; z-index: 2; width: 36%; transform: rotate(4deg); }
.cv-jar--c { right: 4%; top: 22%; transform: rotate(14deg); }
.cv-jar--d { left: 60%; top: 56%; z-index: 3; width: 15%; transform: rotate(10deg); }
.cv-jar--a, .jm-jar--a { filter: drop-shadow(0 0 14px rgba(37, 251, 254, .9)) drop-shadow(0 0 34px rgba(37, 251, 254, .6)) drop-shadow(0 18px 18px rgba(26, 14, 46, .35)); }
.cv-jar--b, .jm-jar--b { filter: drop-shadow(0 0 14px rgba(232, 120, 255, .9)) drop-shadow(0 0 36px rgba(232, 120, 255, .6)) drop-shadow(0 18px 18px rgba(26, 14, 46, .35)); }
.cv-jar--c, .jm-jar--c { filter: drop-shadow(0 0 14px rgba(184, 254, 32, .95)) drop-shadow(0 0 36px rgba(184, 254, 32, .65)) drop-shadow(0 18px 18px rgba(26, 14, 46, .35)); }
.cv-jar--d, .jm-jar--d { filter: drop-shadow(0 0 16px rgba(255, 70, 50, .45)) drop-shadow(0 14px 14px rgba(26, 14, 46, .35)); }
.sx-cover--jam:hover .cv-jar--a { transform: rotate(-18deg) translateY(-8px); }
.sx-cover--jam:hover .cv-jar--b { transform: rotate(0) translateY(-14px) scale(1.04); }
.sx-cover--jam:hover .cv-jar--c { transform: rotate(20deg) translateY(-8px); }
.sx-cover--jam:hover .cv-jar--d { transform: rotate(16deg) translateY(-10px); }

.sx-brand { display: block; line-height: .85; margin: 0; }
.sx-cover__txt { container-type: inline-size; }
.sx-cover .sx-brand--hq { font-size: min(90px, 30cqi); }
.sx-cover .sx-brand--lodge { font-size: min(40px, 11.5cqi); }
.sx-cover .sx-brand--jam { font-size: min(70px, 21cqi); }
.sx-brand--hq { font: 700 clamp(48px, 6vw, 84px)/.8 Karantina, var(--f-display); color: var(--red); text-shadow: 0 0 6px rgba(255, 70, 40, .9), 0 0 22px var(--glow), 0 0 60px rgba(255, 42, 20, .35); }
.sx-brand--lodge { justify-self: start; padding: .24em .38em .18em; font: 900 clamp(26px, 3vw, 42px)/.9 var(--f-display); font-variation-settings: "wdth" 88; text-transform: uppercase; letter-spacing: .02em; color: #f3e7cf; background: #1f3d2b; -webkit-mask: radial-gradient(circle at 50% 0, transparent 3px, #000 3.5px) 0 0 / 12px 51% repeat-x, radial-gradient(circle at 50% 100%, transparent 3px, #000 3.5px) 0 100% / 12px 51% repeat-x; mask: radial-gradient(circle at 50% 0, transparent 3px, #000 3.5px) 0 0 / 12px 51% repeat-x, radial-gradient(circle at 50% 100%, transparent 3px, #000 3.5px) 0 100% / 12px 51% repeat-x; }
.sx-brand--jam { font: 900 clamp(46px, 5.6vw, 78px)/.86 var(--f-display); font-variation-settings: "wdth" 78; text-transform: uppercase; font-style: italic; color: #fff; -webkit-text-stroke: 3px #1a0e2e; paint-order: stroke fill; text-shadow: 4px 4px 0 #ff3ea5, 7px 7px 0 #1a0e2e; transform: rotate(-3deg); transform-origin: left bottom; }
.sx-brand--big.sx-brand--hq { font-size: clamp(96px, 14vw, 200px); }
.sx-brand--big.sx-brand--jam { font-size: clamp(64px, 10vw, 140px); }

.sx-brand--retro { font: 900 clamp(44px, 5.4vw, 76px)/.84 var(--f-display); font-variation-settings: "wdth" 100; font-style: italic; text-transform: uppercase; letter-spacing: -.01em; background: linear-gradient(180deg, #ffffff 0 42%, #c9ecff 52%, #7fd0ff 70%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 3px #1b1fb4; filter: drop-shadow(4px 4px 0 #ff4fc8) drop-shadow(4px 4px 0 #2a0f7a); transform: skewX(-6deg); transform-origin: left bottom; padding-right: .12em; }
.sx-cover .sx-brand--retro { font-size: min(62px, 15cqi); -webkit-text-stroke-width: 2.5px; }
.sx-brand--big.sx-brand--retro { font-size: clamp(66px, 10.5vw, 150px); -webkit-text-stroke-width: 5px; filter: drop-shadow(6px 6px 0 #ff4fc8) drop-shadow(6px 6px 0 #2a0f7a); }

.rr-burst { position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .22) 0 5deg, transparent 5deg 14deg); -webkit-mask: radial-gradient(closest-side, #000 15%, transparent 75%); mask: radial-gradient(closest-side, #000 15%, transparent 75%); animation: sxSpin 60s linear infinite; }
.rr-rings { position: absolute; left: 50%; top: 50%; width: 80%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 40%), repeating-radial-gradient(closest-side, transparent 0 18px, rgba(255, 255, 255, .28) 18px 20px, transparent 20px 34px); }
.rr-disc { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 54%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #f4f7ff 0 13%, #b9c4dd 13.5% 15%, transparent 15.5%), conic-gradient(from 30deg, #c8f3ff, #a99bff, #ff9be6, #fff3b0, #9ef7e0, #8fb4ff, #e2a6ff, #c8f3ff); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .9), inset 0 0 40px rgba(255, 255, 255, .55), 0 24px 50px -16px rgba(20, 10, 90, .7); animation: rrDisc 9s linear infinite; }
.rr-disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 255, 255, .7), transparent 38%, transparent 62%, rgba(255, 255, 255, .35)); }
.rr-disc b { position: relative; z-index: 1; margin-top: 46%; font: 900 clamp(14px, 1.6vw, 22px)/1 var(--f-display); font-style: italic; letter-spacing: .08em; color: #1b1fb4; }
@keyframes rrDisc { to { transform: translate(-50%, -50%) rotate(1turn); } }

.sx-cover--retro { background: radial-gradient(60% 80% at 75% 45%, rgba(255, 255, 255, .45), transparent 60%), linear-gradient(160deg, #1d33ff 0%, #5a3cff 45%, #b64cff 75%, #ff5fc8 100%); color: #fff; border: 0; }
.sx-cover--retro:hover { box-shadow: 0 30px 70px -30px rgba(120, 60, 255, .9); }
.sx-cover--retro .sx-cover__txt > span, .sx-cover--retro .sx-cover__txt small { text-shadow: 0 1px 2px rgba(20, 10, 90, .5); opacity: 1; }
.sx-cover--retro em i { border-radius: 99px; background: #fff; color: #1b1fb4; box-shadow: 0 6px 16px -6px rgba(20, 10, 90, .6); font-style: italic; }
.sx-cover--retro .rr-disc { width: 66%; }

@media (max-width: 1180px) { .sx-covers { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .sx-cover { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .sx-cover__art { order: -1; height: 210px; }
  .cv-p { width: 44%; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-cover, .cv-p, .cv-jar, .rr-burst, .rr-disc { animation: none; transition: none; }
}