.blogs-holder {
    --date-width: 60px;
    --item-spacing: 20px;

    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--item-spacing) * 2);
    padding: calc(var(--item-spacing) * 2) 0;

    .year-marker {
        position: relative;

        span {
            background-color: white;
            padding: calc(var(--item-spacing) / 2) 0;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-accent);
            position: relative;
            z-index: 2;
        }
    }

    .blog {
        position: relative;
        display: flex;
        flex-direction: row;
        gap: var(--item-spacing);
        align-items: center;
        background-color: white;

        .date {
            width: var(--date-width);
            height: var(--date-width);
            min-width: var(--date-width);
            min-height: var(--date-width);
            flex-shrink: 0;
            border-radius: 50%;
            background-color: var(--color-accent);
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            font-weight: 600;
            color: white;
            text-align: center;
            line-height: 1.1;
            word-break: break-all;
        }

        a {
            color: var(--color-accent);
            text-decoration: none;
        }
    }

    &::after {
        --width: 6px;
        content: '';
        position: absolute;
        width: var(--width);
        background-color: var(--color-accent);
        top: 0;
        bottom: 0;
        left: calc(var(--date-width) / 2);
        margin-left: calc(-1 * var(--width) / 2);
    }

}

.ql-editor {
    padding: 0;
}