/*
 Layered image: stack same-sized images on top of each other.
 Use it to keep a picture as it is in dark mode, while a text layer on top
 of it is inverted with darkmode_inverted_image:

 <div class="layered_image">
 \image html  some_image_picture.png
 <div class="darkmode_inverted_image">
 \image html  some_image_text.png
 </div>
 </div>
*/

.layered_image {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.layered_image > div {
    grid-area: 1 / 1;
}