.mdv-club-hero {

    position:relative;

    overflow:hidden;

    border-radius:32px;

    padding:80px 40px;

    background:
        linear-gradient(
            135deg,
            var(--mdv-primary),
            var(--mdv-secondary)
        );

    color:#ffffff;

    margin-bottom:40px;
}

/*
|--------------------------------------------------------------------------
| Overlay
|--------------------------------------------------------------------------
*/

.mdv-club-hero-overlay {

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(255,255,255,0.12),
            transparent 40%
        );

    pointer-events:none;
}

/*
|--------------------------------------------------------------------------
| Inner
|--------------------------------------------------------------------------
*/

.mdv-club-hero-inner {

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    gap:40px;

    flex-wrap:wrap;
}

/*
|--------------------------------------------------------------------------
| Logo
|--------------------------------------------------------------------------
*/

.mdv-club-hero-logo img {

    width:140px;

    height:140px;

    object-fit:contain;

    background:#ffffff;

    border-radius:24px;

    padding:16px;

    box-shadow:
        0 15px 40px rgba(0,0,0,0.25);
}

/*
|--------------------------------------------------------------------------
| Content
|--------------------------------------------------------------------------
*/

.mdv-club-hero-content {

    flex:1;
}

/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
*/

.mdv-club-hero-title {

    margin:0;

    font-size:56px;

    line-height:1.1;

    font-weight:800;

    letter-spacing:-1px;
}

/*
|--------------------------------------------------------------------------
| Socials
|--------------------------------------------------------------------------
*/

.mdv-club-hero-socials {

    display:flex;

    align-items:center;

    gap:14px;

    margin-top:24px;
}

.mdv-club-hero-socials a {

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:rgba(255,255,255,0.14);

    color:#ffffff;

    text-decoration:none;

    font-size:20px;

    transition:all .2s ease;
}

.mdv-club-hero-socials a:hover {

    transform:translateY(-3px);

    background:rgba(255,255,255,0.22);
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width:768px) {

    .mdv-club-hero {

        padding:48px 24px;

        border-radius:24px;
    }

    .mdv-club-hero-inner {

        flex-direction:column;

        align-items:flex-start;
    }

    .mdv-club-hero-title {

        font-size:38px;
    }

    .mdv-club-hero-logo img {

        width:110px;

        height:110px;
    }
}