.legal {
    padding: 40px 16px 56px 16px;
}

@media screen and (min-width: 1024px) {
    .legal {
        padding: 112px 16px;
    }
}

.legal h1 {
    text-align: center;
    color: var(--green-dark);
    margin-bottom: 56px;
    font-size: 32px;
    font-style: italic;
}

@media screen and (min-width: 1024px) {
    .legal h1 {
        font-size: 56px;
        margin-bottom: 80px;
    }
}

.legal h2 {
    color: var(--green-dark);
    font-size: 24px;
}

@media screen and (min-width: 1024px) {
    .legal h2 {
        font-size: 40px;
    }
}

.legal h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--green-dark);
}

.legal h2+h3 {
    margin-top: 16px;
}

.legal h2+p {
    margin-top: 16px;
}

.legal h2+ul {
    margin-top: 16px;
}

.legal h3+p {
    margin-top: 16px;
}

.legal h3+ul {
    margin-top: 16px;
}

.legal p+h3 {
    margin-top: 40px;
}

.legal p+h2 {
    margin-top: 40px;
}

.legal ul+h3 {
    margin-top: 40px;
}

.legal ul+h2 {
    margin-top: 40px;
}

.legal p+ul {
    margin-top: 16px;
}

.legal ul+p {
    margin-top: 16px;
}

.legal ul {
    padding-left: 16px;
}

.legal ul li {
    list-style-type: disc;
}

.legal a {
    position: relative;
    font-weight: 300;
    text-decoration: underline;
    text-underline-offset: 5px;
    transition: font-weight 0.3s ease-in-out;
}

@media (hover: hover) {
    .legal a:hover {
        font-weight: 500;
    }
}