.legal__wrapper {
    background: var(--interface-colors-white);
    max-width: 795px;
    margin: 0 auto;
    font-family: var(--font-family);

    @media (min-width: 430px) {
        padding: 24px;
        border-radius: 24px;
    }
    @media (max-width: 429px) {
        padding: 12px;
        border-radius: 16px;
    }
}
.legal__title {
    text-align: center;
    font-weight: 700;
    color: var(--brand-colors-dark-green);
    border-bottom: 1px solid var(--interface-colors-grey-border);

    @media (min-width: 430px) {
        padding-bottom: 24px;
        margin-bottom: 24px;
    }
    @media (max-width: 429px) {
        padding-bottom: 12px;
        margin-bottom: 12px;
    }

    @media (min-width: 2100px) {
        font-size: 28px;
        line-height: 38px;
    }
    @media (min-width: 590px) and (max-width: 2099px) {
        font-size: 24px;
        line-height: 33px;
    }
    @media (min-width: 430px) and (max-width: 589px) {
        font-size: 20px;
        line-height: 27px;
    }
    @media (max-width: 429px) {
        font-size: 18px;
        line-height: 25px;
    }
}
.legal__content {
    color: var(--brand-colors-dark-green);

    @media (min-width: 1100px) {
        padding: 0 24px;
    }
    @media (min-width: 960px) and (max-width: 1099px) {
        padding: 0 14px;
    }
}

.legal__content .title {
    display: block;

    @media (min-width: 430px) {
        font-size: 20px;
        line-height: 27px;
        margin: 24px 0 20px;
    }
    @media (max-width: 429px) {
        font-size: 16px;
        line-height: 22px;
        margin: 20px 0 16px;
    }
}

.legal__content .title > a {
    display: inline;
}

.legal__content .subtitle {
    display: block;

    @media (min-width: 430px) {
        font-size: 16px;
        line-height: 22px;
        margin: 16px 0 12px;
    }
    @media (max-width: 429px) {
        font-size: 14px;
        line-height: 19px;
        margin: 12px 0 8px;
    }
}

.legal__content p {
    font-weight: 450;
    line-height: 150%;
    margin: 0;

    @media (min-width: 2100px) {
        font-size: 16px;
    }
    @media (min-width: 430px) and (max-width: 2099px) {
        font-size: 14px;
    }
    @media (max-width: 429px) {
        font-size: 12px;
    }
}

.legal__content p + p {
    @media (min-width: 2100px) {
        margin-top: 12px;
    }
    @media (max-width: 2099px) {
        margin-top: 6px;
    }
}

.legal__content a {
    display: inline-block;
    font-weight: 700;
    color: var(--brand-colors-deep-green);
    
    &:hover {
        text-decoration: underline;
    }
}

.legal__content ul, ol {
    padding: 0;
    margin: 0;
}

.legal__content ul li,
.legal__content ol li {
    position: relative;

    @media (min-width: 2100px) {
        padding-left: 24px;
        font-size: 16px;
    }
    @media (min-width: 430px) and (max-width: 2099px) {
        padding-left: 21px;
        font-size: 14px;
    }
    @media (max-width: 429px) {
        padding-left: 18px;
        font-size: 12px;
    }
}

.legal__content ul li {
    &::before {
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--brand-colors-dark-green);
        position: absolute;
        left: 8px;
        top: 10px;
    }
}

.legal__content ul li ul li {
    &:before {
        background: transparent;
        border: 1px solid var(--brand-colors-dark-green);
    }
}

.legal__content ol li {
    counter-increment: item;

    &::before {
        content: counter(item) '.';
        position: absolute;
        left: 4px;
        top: 0;
        color: var(--brand-colors-dark-green);
    }
}

.legal__footer {
    border-top: 1px solid var(--interface-colors-grey-border);

    @media (min-width: 1100px) {
        padding: 24px 24px 0;
    }
    @media (min-width: 960px) and (max-width: 1099px) {
        padding: 24px 14px 0;
    }
    @media (min-width: 430px) and (max-width: 959px) {
        padding: 24px 0 0;
    }
    @media (max-width: 429px) {
        padding: 12px 0 0;
    }

    @media (min-width: 430px) {
        margin: 24px 0 0;
    }
    @media (max-width: 429px) {
        margin: 12px 0 0;
    }
}

.last-updated {
    color: var(--interface-colors-grey-text);
    font-weight: 450;
    line-height: 150%;
    margin: 0;

    @media (min-width: 2100px) {
        font-size: 16px;
    }
    @media (min-width: 430px) and (max-width: 2099px) {
        font-size: 14px;
    }
    @media (max-width: 429px) {
        font-size: 12px;
    }
}