body.dragons-club-page {
    --dragons-club-page-bg: none;
    background: transparent !important;
    position: relative;
}

body.dragons-club-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(180deg, rgba(4, 12, 22, .46) 0%, rgba(5, 12, 22, .56) 52%, rgba(3, 8, 16, .68) 100%),
        var(--dragons-club-page-bg);
    background-size: cover, cover;
    background-position: center top, center top;
    background-repeat: no-repeat, no-repeat;
}

body.dragons-club-page .dragons-club-block {
    background: transparent;
}

body.dragons-club-page #page {
    position: relative;
    z-index: 1;
    background: transparent !important;
}

body.dragons-club-page .site-content,
body.dragons-club-page #primary,
body.dragons-club-page .container {
    background: transparent !important;
}

body.dragons-club-page .site-footer,
body.dragons-club-page .site-subfooter {
    background: rgba(2, 6, 12, .78);
}

body.dragons-club-page .dragons-club-page-title {
    color: #f4f7fb;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .58);
}

.dragons-club-block {
    background: #f5f5f5;
    padding: clamp(26px, 3.4vw, 58px) clamp(14px, 2.1vw, 34px);
    margin: 0;
}

.dragons-club-page-title-wrap {
    max-width: 1360px;
    margin: 0 auto clamp(20px, 2.2vw, 34px);
    text-align: center;
}

.dragons-club-page-title {
    margin: 0;
    color: #262626;
    font-family: 'Anton', sans-serif;
    font-size: clamp(34px, 4.2vw, 64px);
    letter-spacing: .9px;
    text-transform: uppercase;
    line-height: 1;
}

.dragons-club-accent {
    width: min(900px, 92%);
    height: 2px;
    margin: clamp(10px, 1.4vw, 18px) auto 0;
    background: linear-gradient(90deg, #ffbf00 0%, #ff4d2d 50%, #ffbf00 100%);
    box-shadow: 0 0 10px rgba(255, 86, 40, .55);
}

.dragons-club-window {
    max-width: 1260px;
    margin: 0 auto;
    background: rgba(6, 6, 6, .92);
    border: 2px solid transparent;
    border-radius: 22px;
    background-image:
        linear-gradient(rgba(6, 6, 6, .92), rgba(6, 6, 6, .92)),
        linear-gradient(90deg, #ffbf00 0%, #ff4d2d 48%, #ffbf00 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .34);
    padding: clamp(20px, 2.6vw, 42px);
}

.dragons-club-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(170px, .52fr);
    gap: clamp(18px, 2.8vw, 52px);
    align-items: center;
}

.dragons-club-copy {
    color: #f4f4f4;
    max-width: 100%;
    justify-self: start;
    padding-right: clamp(8px, 1.2vw, 20px);
}

.dragons-club-copy h2 {
    margin: 0 0 clamp(14px, 1.8vw, 22px);
    color: #ffffff;
    font-family: 'Anton', sans-serif;
    letter-spacing: .8px;
    font-size: clamp(30px, 3.2vw, 58px);
    line-height: 1;
    text-transform: uppercase;
}

.dragons-club-copy p {
    margin: 0;
    color: rgba(255, 255, 255, .96);
    font-size: clamp(18px, 1.3vw, 28px);
    line-height: 1.66;
    text-wrap: pretty;
}

.dragons-club-copy .dragons-club-extra {
    margin-top: 1em;
}

.dragons-club-center-logo {
    width: clamp(150px, 15vw, 270px);
    height: clamp(150px, 15vw, 270px);
    justify-self: center;
    align-self: center;
    border-radius: 999px;
    overflow: hidden;
    background: #000;
    box-shadow:
        0 0 0 3px #ff4d2d,
        0 0 18px rgba(255, 77, 45, .8),
        0 0 36px rgba(255, 191, 0, .4);
}

.dragons-club-center-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1320px) {
    .dragons-club-grid {
        grid-template-columns: minmax(0, 1fr) minmax(150px, .5fr);
        gap: clamp(16px, 2.2vw, 34px);
    }

    .dragons-club-copy p {
        font-size: clamp(17px, 1.2vw, 23px);
    }
}

@media (max-width: 980px) {
    .dragons-club-window {
        padding: clamp(16px, 3.2vw, 26px);
    }

    .dragons-club-grid {
        grid-template-columns: minmax(0, 1fr) minmax(128px, .46fr);
        gap: clamp(14px, 3vw, 24px);
    }

    .dragons-club-center-logo {
        width: clamp(120px, 18vw, 170px);
        height: clamp(120px, 18vw, 170px);
    }
}

@media (max-width: 760px) {
    body.dragons-club-page::before {
        background-position: center center, center center;
    }

    .dragons-club-block {
        padding: clamp(16px, 4.2vw, 24px) clamp(12px, 3.4vw, 16px);
    }

    .dragons-club-page-title-wrap {
        margin-bottom: clamp(14px, 3.5vw, 20px);
    }

    .dragons-club-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dragons-club-copy h2 {
        font-size: clamp(28px, 10vw, 40px);
    }

    .dragons-club-copy p {
        font-size: clamp(16px, 4.8vw, 20px);
        line-height: 1.58;
    }

    .dragons-club-center-logo {
        justify-self: center;
        width: clamp(112px, 32vw, 148px);
        height: clamp(112px, 32vw, 148px);
    }
}

@media (max-width: 420px) {
    .dragons-club-window {
        border-radius: 16px;
        padding: 14px 12px;
    }

    .dragons-club-copy p {
        font-size: clamp(15px, 4.7vw, 18px);
    }

    .dragons-club-center-logo {
        width: 110px;
        height: 110px;
    }
}