.stoplight-blog-list {
    display: flex;
    flex-flow: row wrap;
    gap: var(--gap);
    margin-top: var(--padding)
}

a.stoplight-blog-item {
    display: flex;
    flex-flow: column nowrap;
    width: var(--1-col)
}

.stoplight-blog-item-image-container {
    border-radius: 4px;
    margin-bottom: 25px;
    overflow: hidden;
    padding-top: 52.475%;
    position: relative;
    width: 100%
}

@media (prefers-color-scheme:dark) {
    .stoplight-blog-item-image-container {
        border: 1px solid var(--border)
    }
}

img.stoplight-blog-image {
    bottom: auto;
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    right: auto;
    top: 0;
    transition: transform .2s;
    width: 100%
}

a.stoplight-blog-item:hover img.stoplight-blog-image {
    transform: scale(1.02)
}

.stoplight-blog-item-info {
    align-items: center;
    column-gap: 10px;
    display: flex;
    font-size: .75rem;
    line-height: 1em;
    margin-bottom: 15px
}

.stoplight-blog-item-info b {
    font-weight: 500
}

.stoplight-blog-item-info u {
    opacity: .85;
    text-decoration: none
}

.stoplight-blog-item-info i {
    font-style: normal;
    font-weight: 200;
    margin: 0 3px 0 4px;
    opacity: .2
}

img.stoplight-blog-item-author {
    border-radius: 100%;
    height: 16px;
    object-fit: cover;
    width: 16px
}

.stoplight-blog-item-text h2 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35em;
    margin: 0
}

.stoplight-blog-item-description {
    line-height: 1.5em;
    margin-top: 10px;
    opacity: .85
}

.stoplight-hero-posts {
    display: flex;
    flex-flow: row wrap;
    gap: var(--gap);
    width: 100%
}

a.stoplight-blog-item.first-post {
    width: var(--2-col)
}

.stoplight-hero-posts>div {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--gap);
    width: var(--1-col)
}

.stoplight-hero-posts>div a.stoplight-blog-item {
    width: 100%
}

a.stoplight-blog-item.first-post img.stoplight-blog-item-author {
    height: 20px;
    width: 20px
}

a.stoplight-blog-item.first-post .stoplight-blog-item-text h2 {
    font-size: 28px
}

a.stoplight-blog-item.first-post .stoplight-blog-item-info {
    font-size: .875rem
}

.more-posts-divider {
    background: var(--border);
    height: 1px;
    margin: 0;
    width: 100% !important
}

@media screen and (max-width:1080px) {
    .stoplight-hero-posts {
        flex-flow: column nowrap
    }

    .stoplight-hero-posts>div {
        display: flex;
        flex-flow: row wrap;
        width: 100%
    }

    .stoplight-hero-posts>div a.stoplight-blog-item {
        width: var(--1-col)
    }

    .more-posts-divider,
    .stoplight-blog-item-description {
        display: none
    }
}

@media screen and (max-width:660px) {
    a.stoplight-blog-item.first-post img.stoplight-blog-item-author {
        height: 16px;
        width: 16px
    }

    a.stoplight-blog-item.first-post .stoplight-blog-item-text h2 {
        font-size: 20px
    }

    a.stoplight-blog-item.first-post .stoplight-blog-item-info {
        font-size: .75rem
    }
}