.memberships-wrap {
    background-color: #20222E;
    padding: 80px 0 200px;
    position: relative;

    &.membership-sign-up {
        background-color: transparent;
        padding-block: 0;

        .memberships {
            display: grid;
            width: 100%;
            justify-items: center;
        }

        & form {
            min-width: max-content;
            position: relative;
            margin: 0 20px;
        }
    }

    .memberships {
        display: grid;
        justify-items: center;

        width: 100%;
        overflow: auto;
        margin: 0 auto;
        line-height: 1.6;

        .option .content {
            width: 100%;
            background-color: #EDEFFE;

            padding-block: 0;

            -border: 1px solid color-mix(in srgb, currentColor, black 10%);
            -border-radius: 4px;

            &:has(.membership-price) {
                background-color: transparent;
                color: #edeffe;
            }

            .membership-price {
                text-align: center;
                color: #edeffe;

                .price-wrap {
                    line-height: 1;
                    margin-top: 60px;
                    position: relative;
                    text-shadow: -1px 0 2px #535353;
                }

                .price {
                    font-size: xxx-large;
                    font-weight: bold;
                    color: #97b722
                }

                &:has(.price.discounted) {
                    .price.original {
                        color: #edeffe;
                        font-size: xx-large;
                        text-decoration: line-through;
                        text-decoration-thickness: 2px;
                    }

                    .price.discounted {

                    }
                }
            }
        }
    }
}

.membership-connect {
    width: 100%;
    height: 235px;
    position: absolute;
    bottom: 0;
    text-align: center;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mO0tA3YBAAC9wF6ZNloLQAAAABJRU5ErkJggg==);

    > div {
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }

    a {
        padding: 20px;
    }
}


/** -----> Sign-up */
.memberships-wrap.membership-sign-up .memberships .form-group,
.memberships-wrap.membership-sign-up .memberships .help-block {
    margin: 0;
}

.memberships-wrap.membership-sign-up {
    background-color: #393d50;
    padding: 40px 0 40px;
}

.memberships-wrap.membership-sign-up .memberships > form {
    margin: 0 20px;
}

.memberships-wrap.membership-sign-up .memberships .option.non-eligible {
    opacity: 0.5;
    filter: grayscale(50%);
}

.memberships-wrap.membership-sign-up .memberships .option.non-eligible.free {
    display: none;
}

@media (max-width: 1219px) {
    .memberships-wrap .memberships {
        display: block;
        overflow: hidden;
    }
}

@media (max-width: 1219px) and (min-width: 920px) {
    .memberships-wrap .memberships > .option {
        margin: 0 1%;
        width: calc(94% / 3);
    }
}

@media (max-width: 919px) {
    .memberships-wrap .memberships > .option:not(:first-child),
    .memberships-wrap.membership-sign-up .memberships > form:not(:first-child) {
        margin-top: 40px;
    }
}

@media (max-width: 399px) {
    .memberships-wrap .memberships > .option {
        float: none;
        display: block;
        margin: 0 auto;
        width: calc(100% - 10px);
        padding: 0 5px;
    }

    .memberships-wrap .memberships > .option:not(:first-child),
    .memberships-wrap.membership-sign-up .memberships > form:not(:first-child) {
        margin-top: 40px;
    }
}