@media (prefers-color-scheme: dark) {
    .skeleton-box {
        display: inline-block;
        height: 1em;
        position: relative;
        overflow: hidden;
        background-color: #262F3F;
    }

    .skeleton-box::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.1)), color-stop(60%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0)));
        background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.1) 10%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0));
        -webkit-animation: shimmer 2s infinite;
        animation: shimmer 2s infinite;
        content: '';
    }
}
@media (prefers-color-scheme: light) {
    .skeleton-box {
        display: inline-block;
        height: 1em;
        position: relative;
        overflow: hidden;
        background-color: #DDDBDD;
    }

    .skeleton-box::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.2)), color-stop(60%, rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
        background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
        -webkit-animation: shimmer 2s infinite;
        animation: shimmer 2s infinite;
        content: '';
    }

}
@-webkit-keyframes shimmer {
    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}
@keyframes shimmer {
    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}
.blog-post__headline {
    font-size: 1.25em;
    font-weight: bold;
}
.blog-post__meta {
    font-size: 0.85em;
    color: #6b6b6b;
}

.o-media {
    display: -webkit-box;
    display: flex;
}
.o-media__body {
    -webkit-box-flex: 1;
    flex-grow: 1;
    margin-left: 1em;
}

.o-vertical-spacing > * + * {
    margin-top: 0.75em;
}
.o-vertical-spacing--l > * + * {
    margin-top: 2em;
}