.portfolio__top {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.blog-post__fallback-card {
    min-height: 328px;
    padding: 0;
    font: inherit;
    text-align: left;
    background:
        radial-gradient(circle at 82% 14%, rgba(255, 255, 255, 0.42), transparent 28%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 54%),
        var(--bg);
    border: 0;
    cursor: pointer;
}

.blog-post__fallback-card .service-card-blog__content {
    align-self: stretch;
    justify-content: flex-end;
    min-height: 100%;
}

.service-card-blog__eyebrow,
.service-card-blog__note {
    display: block;
    margin: 0;
    line-height: 1.25;
}

.service-card-blog__eyebrow {
    max-width: 260px;
    font-size: 2rem;
    color: var(--gray-900);
}

.service-card-blog__note {
    max-width: 310px;
    font-size: 1.8rem;
}

.blog-post__fallback-card .service-card-blog__arrow {
    transition: transform 0.2s ease;
}

.blog-post__fallback-card:hover .service-card-blog__arrow,
.blog-post__fallback-card:focus-visible .service-card-blog__arrow {
    transform: translateX(8px);
}

.blog-post__fallback-card:focus-visible {
    outline: 3px solid var(--primary-black);
    outline-offset: 4px;
}

@media only screen and (min-width: 1200px) {
    .blog-post__right {
        position: sticky;
        top: 116px;
        align-self: start;
        max-height: calc(100vh - 136px);
        padding-right: 4px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .blog-post__right > .service-card-blog:first-child {
        margin-top: 0;
    }
}

@media only screen and (max-width: 1199px) {
    .portfolio__top {
        gap: 24px;
    }
}

@media only screen and (max-width: 767px) {
    .portfolio__top {
        gap: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-post__fallback-card .service-card-blog__arrow {
        transition: none;
    }
}