.at-membership {
    container-name: membership;
    container-type: inline-size;
    height: 100%;
    padding: var(--marginMedium);
    background-color: var(--tertiaryColor100);
}

.at-membership .g-container__inner,
.at-membership__inner,
.at-membership__contentWrapper {
    height: 100%;
}

.at-membership__contentWrapper {
    display: flex;
    flex-direction: column;
    container-type: inline-size;
}

.at-membership__title {
    margin-bottom: var(--marginExtraSmall);
}

.at-membership__subtitle {
    font-size: var(--smallerSize);
}

@container (min-width: 310px) {
    .at-membership__subtitle {
        flex: 1;
    }
}

.at-membership__text {
    margin-bottom: 0;
}

.at-membership__parts {
    margin-block: var(--marginMedium) var(--marginLarge);
    padding: 0;
    list-style: none;
}

.at-membership__part {
    position: relative;
    padding-left: var(--marginMedium);
}

.at-membership__part + .at-membership__part {
    margin-block-start: var(--marginExtraSmall);
}

.at-membership__part::before {
    position: absolute;
    left: 0;
    font-family: var(--iconFont);
    content: '\e813';
}

.at-membership__part.--included::before {
    content: '\e830';
}

.at-membership__part.--optional::before {
    content: '\f10c';
}

.at-membership .u-buttonWrapper {
    margin-top: auto;
    justify-content: flex-start;
}

@container membership (min-width: calc(256px * 2 + 2rem - 1px)) {
    .at-membership__parts {
        columns: 2;
        column-gap: var(--marginMedium);
    }
}

@container membershipContainer (min-width: calc((256px * 3) + (2rem * 2))) {
    .at-membership__text {
        min-height: 3lh;
    }
}