hypothetical/resources/sass/pages/_blog.scss

.blog-page-component {
    padding: $grid-gutter-width 0px;

    h1 {
        margin-bottom: $grid-gutter-width;
    }

    .blog-entry {
        border: 1px solid color.adjust($c-base, $lightness: 75%);
        border-radius: pxrem(5);

        @include media-breakpoint-up(md) {
            display: flex;
            flex-direction: row-reverse;
        }

        &:not(:last-child) {
            margin-bottom: $grid-gutter-width;
        }

        &-header-image {
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;

            @include media-breakpoint-down(md) {
                width: 100%;
                aspect-ratio: 3/1;
            }

            @include media-breakpoint-up(md) {
                width: 35%;
                flex-shrink: 0;
            }
        }

        &-content {
            padding: pxrem(25);

            @include media-breakpoint-up(md) {
                display: flex;
                flex-flow: row wrap;
                flex-grow: 1;
            }

            > * {
                width: 100%;
            }

            &-title {
                @include font-sans-semibold;
                margin-bottom: $grid-gutter-width;
                font-size: pxrem(25);
                text-transform: uppercase;
            }

            &-info {
                color: color.adjust($c-text, $lightness: 30%);
            }

            &-body {
                margin: $half-gutter-width 0px;
            }

            &-taglist {
                width: 100%;

                &-item {
                    margin-right: pxrem(5);
                    display: inline-block;
                    padding: pxrem(3) pxrem(8);
                    border-radius: pxrem(3);
                    background-color: $c-accent;
                    color: $c-text-light;
                }
            }
        }
    }
}