.info-box {
    --color-border: rgb(255, 130, 96);
    --color-shadow: rgb(193, 50, 20);
    --text-padding: 20px;
    --icon-width: 87.5px;
    --icon-size: 40px;
    --box-spacing: 50px;
    background-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0px 2px 0px var(--color-shadow);
    margin: var(--box-spacing) 0;
    padding-bottom: 1px; /* to avoid collapsing margins  */
}

@media (min-width: 768px) {
    .info-box {
        --text-padding: 37px;
        --icon-width: 108.5px;
        --icon-size: 40px;
    }
}

.info-box__title {
    margin: 0;
    position: relative;
    border-bottom: 1px solid var(--color-border);
    padding: var(--text-padding) var(--text-padding) var(--text-padding) calc(var(--text-padding) + var(--icon-width));
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    line-height: 22px;
}

    .info-box__title::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: var(--icon-width);
        padding: var(--text-padding) 0;
        border-right: 1px solid var(--color-border);
        background: center / auto no-repeat url('/gfx/icons/information.svg');
        background-size: var(--icon-size);
    }

.info-box__content {
    margin: var(--content-spacing);
}

    .info-box__content a {
        text-decoration: underline;
        color: var(--color-white);
    }

    .info-box__content li {
        margin: 15px 0;
    }