#blogPreview {
    align-content: stretch;
    display: flex;
    flex-flow: column nowrap;
    gap: 1.4rem;
    justify-content: start;
    padding: 0 9px 10px 9px;

    & .blogPreviewPost {
        padding-bottom: 1rem;

        @supports (display: grid) {
            display: grid;
            gap: .6rem .8rem;
            grid-template-areas:
                'title title'
                'image excerpt'
                'meta meta';
            grid-template-columns: max-content 1fr;
            grid-template-rows: max-content max-content max-content;
        }

        &:not(:last-child) {
            border-bottom: 1px solid #cad6da;
        }
        & .blogPreviewPost__titleLink {
            color: #d16315;

            @supports (display: grid) {
                grid-area: title;
            }
            @supports not (display: grid) {
                display: block;
                margin-bottom: .6rem
            }

            &:hover{
                color: #ea8b35;
            }
        }
        & .blogPreviewPost__title {
            font-size: 1rem;
            font-weight: 400;
            margin: 0;
            /* text-wrap: balance; */
        }
        & .blogPreviewPost__imageLink {
            display: block;

            @supports (display: grid) {
                grid-area: image;
                margin: .2rem 0;
            }
            @supports not (display: grid) {
                float: left;
                margin: .2rem .8rem .2rem 0;
            }
        }
        & .blogPreviewPost__image {
            display: block;
            height: auto;
            width: 80px;

            & * {
                height: auto;
                width: 100%;
            }
        }
        & .blogPreviewPost__excerpt {
            color: #615f52;
            margin: 0;

            @supports (display: grid) {
                grid-area: excerpt;
            }
        }
        & .blogPreviewPost__meta {
            align-items: center;
            display: flex;
            flex-flow: row nowrap;
            font-size: 10px;
            justify-content: space-between;

            @supports (display: grid) {
                grid-area: meta;
            }

            & .blogPreviewPost__datetime {
                color: #444;
                color: #678692;
            }
            & .blogPreviewPost__readLink {
                & a {
                    font-weight: 700;
                }
            }
        }
    }
}
.lds-ring {
    display: inline-block;
    position: relative;
    width: 12px;
    height: 12px;

    & div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 10px;
        height: 10px;
        margin: 2px;
        border: 2px solid #678692;
        border-radius: 50%;
        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: #678692 transparent transparent transparent;
    }
    & div:nth-child(1) {
        animation-delay: -0.45s;
    }
    & div:nth-child(2) {
        animation-delay: -0.3s;
    }
    & div:nth-child(3) {
        animation-delay: -0.15s;
    }
}
@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}