.tiers-wrapper {
    height: 100%;
}

.membership-container {
    display: flex;
    flex-direction: column;
}

.membership-tiers {
    display: flex;
    gap: var(--grid-gap);
    height: 100%;
}

.tier-card {
    border: 1px solid var(--text-color-60);
    padding: max(46px, calc(3.19vw * var(--scale))) max(24px, calc(1.67vw * var(--scale)));
    min-width: max(352px, calc(24.44vw * var(--scale)));
    display: flex;
    flex-direction: column;
}

.tier-name {
    margin-bottom: max(38px, calc(2.64vw * var(--scale)));
    font-size: max(16px, calc(1.11vw * var(--scale)));
}

.tier-description {
    margin-top: max(7px, calc(0.486vw * var(--scale)));
    margin-bottom: max(20px, calc(1.25vw * var(--scale)));
    opacity: 0.6;
    line-height: 130%;
    font-size: max(18px, calc(1.25vw * var(--scale)));
}

.benefits-outer {
    width: 100%;
    border-top: 1px solid var(--text-color-60);
    padding-top: max(26px, calc(1.8vw * var(--scale)));
    padding-bottom: max(30px, calc(2.08vw * var(--scale)));
}

.benefits-list {
    list-style: none;
    column-gap: max(36px, calc(1.94vw * var(--scale)));
    columns: 1;
}

.benefits-list p {
    opacity: 0.8;
}

.benefit-list-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: max(12px, calc(0.83vw * var(--scale)));
    min-width: calc(max(352px, calc(24.44vw * var(--scale))) - 2 * max(24px, calc(1.67vw * var(--scale))))
}

.benefit-icon-outer {
    font-size: max(14px, calc(0.97vw * var(--scale)));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: max(8px, calc(0.56vw * var(--scale)));
}   

.benefit-icon {
    width: max(16px, calc(1.11vw * var(--scale)));
    min-width: max(16px, calc(1.11vw * var(--scale)));
    height: max(16px, calc(1.11vw * var(--scale)));
    display: flex;
    align-items: center;
    justify-content: center;
}

.tier-button-wrapper {
    margin-top: auto;
    display: flex;
    justify-content: center;
    width: 100%;
}

.tier-button-wrapper .button {
    font-size: max(16px, calc(1.11vw * var(--scale)));
}

.membership-tab-buttons {
    display: flex;
    margin-bottom: max(18px, calc(1.25vw * var(--scale)));
}

.membership-tiers[data-inactive="true"] {
    display: none;
}

.radio-button-text {
    font-size: max(16px, calc(1.11vw * var(--scale))) !important;
}

h4 {
    font-size: max(24px, calc(1.67vw * var(--scale)));
}

.sticky-posts-section .membership-container {
    min-width: calc(100vw - 2 * var(--small-padding));
}

.sticky-posts-section .benefits-outer {
    padding-bottom: max(16px, calc(1.11vw * var(--scale)));
}

.sticky-posts-section .tier-card {
    padding: max(28px, calc(1.94vw * var(--scale))) max(24px, calc(1.67vw * var(--scale)));
}

@media (max-width: 991px) {  
    .membership-tiers {
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }
    
    .tier-card { 
        width: 100%;
        min-width: unset;
        max-width: 420px;
        min-height: 530px;
    }
    
    .benefits-list {
        columns: 1 !important;
    }

    .benefit-list-item {
        min-width: unset !important;
        width: 100% !important;
    }

    .benefits-outer {
        margin-bottom: 10px;
    }

    .membership-tab-buttons {
        justify-content: center;
    }

    .sticky-posts-section .membership-container {
        min-width: unset;
    }

    .sticky-posts-section .benefits-outer {
        padding-bottom: max(30px, calc(2.08vw * var(--scale)));
    }
    
    .sticky-posts-section .tier-card {
        padding: max(46px, calc(3.19vw * var(--scale))) max(24px, calc(1.67vw * var(--scale)));
    }
}