.media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.media-body {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.media.media--death-notice {
    align-items: center;

    img {
        border-radius: 50%;
        height: 2rem;
        object-fit: cover;
        overflow: hidden;
        width: 2rem;
    }
}

#death-notice-wrapper {
    background-color: #333;
    color: #E0E0E0;
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
    width: 100%;

    .mobile-wrapper {
        row-gap: 0.5rem;
        width: 100%;
    }

    button[data-target="#death-notice-modal"] {
        color: white;
        font-weight: bold;
        padding-bottom: 0;
        padding-top: 0;
        text-decoration: underline;
    }

    button[data-target="#death-notice-wrapper"] {
        @media (max-width: 576px) {
            align-self: flex-start;
        }
    }
}

.modal-dialog {
    @media (min-width: 576px) {
        max-width: 40rem;
    }
}

.modal-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem 1.5rem 3.5rem 1.5rem;

    @media (min-width: 576px) {
        padding: 2.5rem 3rem 3rem 3rem;
    }
}

#death-notice-modal {
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 0;
    }

    .modal-header{
        border-bottom: none;
    }

    .modal-body {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;

        h5 {
            font-size: 1.375rem;

            @media (min-width: 576px) {
                font-size: 1.5rem;
            }
        }

        a {
            color: #333;
            text-decoration: underline;
        }
    }

    .text-smaller {
        font-size: 0.75rem;
    }

    .color-date {
        color: #737373;
    }

    .color-footer {
        color: #595959;
    }

    hr {
        border-color: #E0E0E0;
        margin: 0;
    }

    .media.media--death-notice {
        img {
            height: 4rem;
            width: 4rem;

            @media (min-width: 576px) {
                height: 5rem;
                width: 5rem;
            }
        }
    }
}