.manual {
    --h2-total-height: 48px;
    --h3-total-height: 41px;
    --image-width: 30%;
    --column-gap: 5rem;

    margin-block: 1em;

    section, header, .sub-section {
        margin-block-end: 5em;

        &:last-child {
            margin-block-end: 0;
        }
    }

    section {
        padding-block-end: 5em;
        border-block-end: 1px solid #d3d3d3;

        &:last-child {
            padding-block-end: initial;
            border: none;
        }
    }

    nav {
        margin-block-start: 2em;

        h2 {
            font-size: 1.5em;
        }

        ul {
            column-count: 2;
        }
    }

    section > h2, section > h3 {
        max-width: calc(100% - var(--image-width) - var(--column-gap));
    }

    section > h2 + .sub-section {
        margin-block-start: calc(-1 * var(--h2-total-height));

        > :first-child {
            margin-block-start: var(--h2-total-height);
        }
    }

    section > h3 + .sub-section {
        margin-block-start: calc(-1 * var(--h3-total-height));

        > :first-child {
            margin-block-start: var(--h3-total-height);
        }
    }

    .sub-section {
        display: flex;
        column-gap: var(--column-gap);

        :first-child {
            flex: 1;
        }

        img {
            width: 30%;
        }
    }

    @media (max-width: 470px) {
        ul {
            padding-inline-end: 1em;
        }

        nav ul {
            column-count: 1;
        }

        section, header {
            margin-block-end: 3em;
        }

        section {
            padding-block-end: 3em;
        }

        section > h2, section > h3 {
            max-width: initial;
        }

        .sub-section {
            flex-direction: column;
            margin-block-end: 1em;

            img {
                width: 100%;
            }
        }
    }
}

@media (min-device-width: 1600px) and (min-width: 1600px) {
    .manual {
        margin-bottom: 125px;
    }
}