.membership-hero {
    min-height: min(600px, 66vh);
    display: flex;
    align-items: center;
    padding: clamp(2rem, 7vw, 6rem);
    border: 1px solid rgba(202, 164, 92, .32);
    border-radius: 1.25rem;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(7, 8, 8, .97) 0%, rgba(7, 8, 8, .82) 42%, rgba(7, 8, 8, .1) 76%),
        url('/images/membership/membership-hero.png') center / cover no-repeat;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .34);
}

.membership-hero__content { max-width: 42rem; }
.membership-hero h1 { max-width: 10ch; font-size: clamp(2.8rem, 7vw, 6rem); line-height: .94; }
.membership-hero p { max-width: 38rem; color: #e7ded0; font-size: clamp(1.05rem, 2vw, 1.3rem); }
.membership-section { padding: clamp(3rem, 7vw, 6rem) 0 1rem; }
.membership-heading { max-width: 52rem; margin-bottom: 1.75rem; }
.membership-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.membership-grid--services { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.membership-card { position: relative; padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid rgba(202, 164, 92, .25); border-radius: 1rem; background: linear-gradient(145deg, rgba(30, 31, 31, .96), rgba(12, 14, 14, .98)); }
.membership-card.is-current { border-color: #caa45c; box-shadow: inset 0 0 0 1px rgba(202, 164, 92, .3); }
.membership-card--mademember { background: linear-gradient(145deg, rgba(63, 42, 25, .96), rgba(17, 15, 13, .98)); }
.membership-card--innercircle { background: linear-gradient(145deg, rgba(65, 17, 24, .96), rgba(14, 9, 11, .99)); }
.membership-card ul { padding-left: 1.2rem; color: #ddd4c8; }
.membership-card li + li { margin-top: .45rem; }
.membership-current { display: inline-block; margin-bottom: 1rem; padding: .25rem .6rem; border-radius: 999px; color: #17120a; background: #caa45c; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.membership-price { color: #dfbf7a; font-size: 1.15rem; font-weight: 700; }
.membership-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.membership-pending { padding-top: 1rem; color: #cabfae; font-size: .9rem; }
.membership-legal { max-width: 70rem; margin: 3rem auto 1rem; color: #a89f93; text-align: center; font-size: .85rem; }
.membership-confirmation { max-width: 52rem; margin: 8vh auto; text-align: center; }

@media (max-width: 720px) {
    .membership-hero { min-height: 560px; align-items: flex-end; background-position: 68% center; }
}