.blog-page {
    .hero {
        position: relative;
        background: url("/wp-content/themes/ritewayplumbingny/assets/images/blog/blog-image.png") no-repeat center/cover;
        width: 100%;
        min-height: 300px;
        padding: 44px 0;
        text-align: center;

        display: flex;
        align-items: center;
        justify-content: center;

        @media (max-width: 480px) {
            min-height: 206px;
        }
    }

   .hero:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(5, 7, 42, 0.5);
    }

    .hero__title {
        position: relative;
        font-size: 48px;
        line-height: 32px;
        font-weight: 700;
        color: #fff;
        z-index: 1;
    }

    @media (max-width: 768px) {
        .hero__title {
            font-size: 32px;
            line-height: 40px;
        }
    }
    .content {
        position: relative;
        margin-top: -32px;
        background-color: #fff;
        border-top-left-radius: 32px;
        border-top-right-radius: 32px;
        z-index: 1;
    }

    .services-breadcrumbs-desktop {
        display: block;
    }

    .services-breadcrumbs-mobile {
        display: none;
    }

    .services-breadcrumbs {
        position: relative;
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .services-breadcrumbs__home {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        @media (max-width: 768px) {
            width: 60px;
            height: 40px;
        }
    }

    main.blog-page #breadcrumbs a,
    main.blog-page #breadcrumbs .breadcrumb_last {
        color: #140101;
    }
    .blog-items {
        padding: 128px 0 109px;
        @media (max-width: 768px) {
            padding: 64px 0 60px;
        }
        @media (max-width: 480px) {
            padding: 27px 0;
        }
    }
    .blog-item__wrapper {
        display: flex;
        align-items: center;
        gap: 30px;
    }
    @media (max-width: 768px) {
        .blog-item__wrapper {
            flex-direction: column;
            gap: 20px;
        }
    }
    .blog-item__thumbnail {
        flex: 0 1 380px;
        overflow: hidden;
        border-radius: 16px;
        position: relative;
    }

    .blog-item__thumbnail::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(5, 7, 42, 0.3);
        border-radius: 16px;
    }
    @media (max-width: 768px) {
        .blog-item__thumbnail {
            flex-basis: 100%;
            width: 100%;
        }
    }
    @media (max-width: 480px) {
        .services-breadcrumbs-desktop {
            display: none;
        }

        .services-breadcrumbs-mobile {
            display: block;
        }
    }
    .blog-item__content {
        flex: 0 1 657px;
    }
    @media (max-width: 768px) {
        .blog-item__content {
            flex-basis: 100%;
        }
    }
    .blog-item__thumbnail .blog-item__thumbnail-image {
        display: block;
        width: 100%;
        height: 320px;
        object-fit: cover;
        border-radius: 16px;
        transition: transform 0.3s ease-in-out;
    }
    @media (max-width: 480px) {
        .blog-item__thumbnail .blog-item__thumbnail-image {
            width: 100%;
            height: 220px;
        }
    }
    .blog-item__title a {
        font-size: 37px;
        line-height: 50px;
        font-weight: 500;
        color: #140101;
    }
    @media (max-width: 768px) {
        .blog-item__title a {
            font-size: 28px;
            line-height: 38px;
        }
    }
    @media (max-width: 480px) {
        .blog-item__title a {
            font-size: 24px;
            line-height: 32px;
        }
    }
    .blog-item__title {
        margin-bottom: 23px;
    }
    @media (max-width: 480px) {
        .blog-item__title {
            margin-bottom: 20px;
        }
    }
    .blog-item__wrapper:hover .blog-item__thumbnail img {
        transform: scale(1.05);
    }
    .blog-item__title a:hover {
        color: var(--color-text-link);
    }
    .blog-item__excerpt {
        font-size: 14px;
        line-height: 27px;
        color: rgba(20, 1, 1, 0.8);
    }
    @media (max-width: 480px) {
        .blog-item__excerpt {
            text-align: justify;
        }
    }
    .blog-item__date {
        font-size: 14px;
        line-height: 27px;
        color: #9CA3AF;
        margin-bottom: 16px;
    }
    @media (max-width: 768px) {
        .blog-item__date {
            margin-bottom: 12px;
        }
    }
    .blog-item + .blog-item {
        margin-top: 100px;
    }
    @media (max-width: 768px) {
        .blog-item + .blog-item {
            margin-top: 60px;
        }
    }
    .pagination {
        display: flex;
        justify-content: center;
        gap: 30px;
        margin-top: 100px;
    }
    @media (max-width: 768px) {
        .pagination {
            margin-top: 60px;
            gap: 20px;
        }
    }
    .page-numbers.current {
        background-color: #ED1C24;
        font-size: 15px;
        line-height: 35px;
        color: #fff;
        border-radius: 5px;
        min-width: 35px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .page-numbers {
        display: flex;
        align-items: center;
        position: relative;
        padding: 4px;
        background-color: #F8F8F8;
        border-radius: 5px;
    }
    .page-numbers a {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 35px;
        height: 35px;
        font-size: 15px;
        color: #140101;
        text-decoration: none;
    }
    .page-number {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 35px;
        height: 35px;
    }
    .page-number a {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 35px;
        height: 35px;
        font-size: 15px;
        color: #140101;
        text-decoration: none;
        background-color: #F8F8F8;
        border-radius: 5px;
    }
    .page-number .current {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 35px;
        height: 35px;
        font-size: 15px;
        color: #fff;
        background-color: #ED1C24;
        border-radius: 5px;
    }
    .next-page-btn {
        position: relative;
        font-size: 14px;
        line-height: 43px;
        color: #ED1C24;
    }
    .next-page-btn:before {
        content: "";
        position: absolute;
        top: calc(50% + 1px);
        right: -12px;
        width: 8px;
        height: 8px;
        border-top: 2px solid #ED1C24;
        border-right: 2px solid #ED1C24;
        transform: translateY(-50%) rotate(45deg);
    }
}