/*
*  ADDRESS HISTORY
*  context person / household
*/
div.address-timeline.grid {
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: auto 120px auto;

    div.household-address & {
        // no col-a in this context !
        grid-template-columns: 0 120px auto;
    }

    @media only screen and (max-width: 750px) {
        grid-template-columns: auto 1em auto;
    }

    div.top {
        grid-column: 2;
        text-align: center;
        color: lightgrey;
        margin-bottom: -20px;
    }
    div.col-a {
        grid-column: 1;
        text-align: right;
    }
    div.col-b,
    div.date {
        grid-column: 2;
        position: relative;
        &:after {
            position: absolute;
            content: '';
            top: 0; bottom: 0;
            left: 50%;
            margin: auto -5px;
            width: 10px;
            height: 100%;
            background-color: lightgrey;
            z-index: -5;
        }
    }
    div.col-c {
        grid-column: 3;
    }

    div.col-b,
    div.action,
    div.content {
        min-height: 30px;
        padding: 1em;
    }
    div.content {
        margin: 0.3em;
        border: 1px dashed #00000045;
        &.row1 { // current address
            border: 1px solid #000;
        }
        div.address {
            font-variant: small-caps;
        }
    }
    div.date {
        text-align: center;
        background-color: lightgrey;
        padding: 0.5em;
        border-radius: 0.3em;
    }

    div.span2 { grid-row: span 3; }
    div.span3 { grid-row: span 5; }
    div.span4 { grid-row: span 7; }
    div.span5 { grid-row: span 9; }

    ul.record_actions {
        margin: 0;
    }
    .fake {
        &:after {
            content: 'fake, just to test.. ';
            color: lightgrey;
            font-style: italic;
        }
    }
}

