.Tombstone {
    background-color: $color-bg-white;
    margin: 30px 0;
    display: flex;

    dt {
        color: $midnight-blue;
        font-size: 15px;
        font-weight: 700;
    }

    dd {
        margin-bottom: 1.5em;
    }
}

.Icon {
    color: $brand-danger;
    width: 60px;
}

.TitleBlock {
    min-width: 50%;
    border-right: 1px solid $color-border-gray-light;
    padding: 25px 25px 30px;

    .SubtitleBlock {
        padding-top: 20px;
    }
}

.Title {
    display: flex;
    align-items: center;

    h2 {
        margin: 0;
        padding-left: 20px;
    }
}

.MetadataBlock {
    min-width: 50%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row dense;
    grid-column-gap: 15px;
    padding: 25px 25px 30px;

    > :first-child,
    > :nth-child(2) {
        grid-column: span 2;
    }
}

@media(min-width: 768px) {
    .TitleBlock {
        .SubtitleBlock {
            padding-left: 80px;
        }
    }
}

@media(max-width: 767px) {
    .Tombstone {
        flex-direction: column;
    }

    .TitleBlock {
        border-right: 0;
        border-bottom: 1px solid $color-border-gray-light;
    }
}

@media(max-width: 480px) {
    .MetadataBlock {
        grid-template-columns: 1fr;
    }
}
