.element-x-page {
    position: relative;
    padding: clamp(32px, 5vw, 80px) 0 72px;
    color: #f5f7ff;
}

.element-x-page .md-typeset h1,
.element-x-page .md-typeset h2,
.element-x-page .md-typeset p {
    margin: 0;
}

.element-x-steam-widget {
    position: relative;
    z-index: 30;
}

.element-x-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url('../assets/ex/parallax.webp');
    background-size: cover;
    background-position: center calc(50% + var(--element-x-bg-y, 0px));
    background-repeat: no-repeat;
    filter: saturate(0.62) brightness(0.38) contrast(0.88);
    will-change: background-position;
}

@media (prefers-reduced-motion: reduce) {
    .element-x-bg {
        background-position: center;
    }
}

.element-x-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(5, 7, 14, 0.12) 28%, rgba(5, 7, 14, 0.42) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 90%, var(--md-default-bg-color, #0f111a) 100%);
}

.element-x-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.26) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, var(--md-default-bg-color, #0f111a) 90%);
}

.element-x-hero {
    margin: 0 auto clamp(24px, 4vw, 48px);
    width: min(1180px, 92vw);
    text-align: center;
}

.element-x-logo {
    font-size: clamp(2.5rem, 8vw, 6rem);
    letter-spacing: 0.16em;
    font-weight: 900;
    line-height: 1;
}

.element-x-page hr.element-x-rule {
    display: block;
    margin-top: clamp(16px, 2vw, 24px);
    margin-bottom: clamp(16px, 2vw, 24px);
    margin-left: auto;
    margin-right: auto;
    height: 1px;
    border: 0;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.42) 20%,
            rgba(255, 255, 255, 0.42) 80%,
            rgba(255, 255, 255, 0) 100%);
    width: min(520px, 72vw);
}

.element-x-hero h1 {
    font-size: clamp(1.4rem, 4vw, 3rem);
    letter-spacing: 0.03em;
}

.element-x-section {
    margin: 0 auto clamp(18px, 2.2vw, 28px);
    width: min(1180px, 92vw);
}

.element-x-panel {
    margin: 0 auto clamp(18px, 2.2vw, 28px);
    width: min(1180px, 92vw);
    padding: clamp(20px, 3vw, 40px);
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(3px);
}

.element-x-panel h2 {
    margin-bottom: clamp(16px, 2vw, 28px);
    text-align: center;
    font-size: clamp(1.3rem, 2.8vw, 2.2rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.element-x-embed-panel,
.element-x-video-panel {
    display: flex;
    justify-content: center;
}

.element-x-embed-panel iframe {
    display: block;
    width: min(100%, 646px);
    max-width: 100%;
    aspect-ratio: 646 / 190;
    height: auto;
    border: 0;
    background: transparent;
}

.element-x-video-panel iframe {
    width: min(100%, 960px);
    max-width: 100%;
}

.element-x-video-panel iframe {
    aspect-ratio: 16 / 9;
    height: auto;
}

.element-x-grid {
    display: grid;
    gap: clamp(16px, 2vw, 28px);
}

.element-x-grid-abilities {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.element-x-grid-features {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.element-x-item {
    text-align: center;
    line-height: 1.45;
}

.element-x-item img {
    width: clamp(52px, 8vw, 86px);
    height: auto;
    margin: 0 auto 12px;
}

.element-x-elements {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.element-x-elements img {
    width: clamp(48px, 7vw, 74px);
    margin: 0;
}

.element-x-carousel {
    position: relative;
    display: grid;
    gap: 0;
}

.element-x-carousel-viewport {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 14px;
}

.element-x-carousel-viewport::-webkit-scrollbar {
    display: none;
}

.element-x-carousel-slide {
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: start;
}

.element-x-carousel-slide img {
    width: 100%;
    height: auto;
    display: block;
}

.element-x-carousel-controls {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    pointer-events: none;
}

.element-x-carousel-btn {
    width: auto;
    height: auto;
    padding: 2px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
    cursor: pointer;
    opacity: 0.82;
    pointer-events: auto;
    transition: transform 150ms ease, opacity 150ms ease;
}

.element-x-carousel-btn:hover,
.element-x-carousel-btn:focus-visible {
    opacity: 1;
    transform: scale(1.12);
}

@media (max-width: 980px) {
    .element-x-grid-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {

    .element-x-grid-abilities,
    .element-x-grid-features {
        grid-template-columns: 1fr;
    }
}