.blog-template {
    max-width: 1224px !important;
    margin: 0 auto;

    h2 {
        margin: 0 0 20px;
        padding-top: 40px;
        font-weight: 800;
        font-size: var(--wp--preset--font-size--font-24-px);
        line-height: 133%;
    }

    .blog-template__cards {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 40px;
        justify-content: flex-start;
        gap: 18px;
    }

    .blog-template__card {
        position: relative;
        max-width: 100%;
        border: 1px solid var(--wp--preset--color--light-gray);
        border-radius: 10px;
        display: flex;
        flex-direction: column;

        @media (min-width: 520px) {
            max-width: calc(50% - 9px);
        }

        @media (min-width: 920px) {
            max-width: calc(25% - 14px);
        }

        .blog-template__card-image {
            width: 100%;
            height: auto;
            overflow: hidden;
            display: flex;
            align-content: center;
            justify-content: center;
            border-radius: 10px 10px 0 0;
            max-height: 160px;
            min-height: 160px;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: all 0.25s;
                min-height: 160px;
            }
        }

        .blog-template__card-data {
            padding: 12px 16px 20px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            height: 100%;
            border-radius: 0 0 10px 10px;
            transition: .25s;
            border-bottom: 1px solid transparent;
            border-left: 1px solid transparent;
            border-right: 1px solid transparent;

            .categories {
                z-index: 2;

                a {
                    font-weight: 400;
                    font-size: var(--wp--preset--font-size--font-14-px);
                    letter-spacing: 0.02em;
                    text-transform: uppercase;
                    text-decoration: none;

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }

            .title {
                font-size: var(--wp--preset--font-size--font-20-px);
                font-weight: 800;
                line-height: 32px;
                color: var(--wp--preset--color--black);
                margin: 0;
            }

            .description {
                font-size: var(--wp--preset--font-size--font-16-px);
                line-height: 24px;
                color: var(--wp--preset--color--black);
                overflow: hidden;
                position: relative;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
            }
        }

        > a {
            position: absolute;
            height: 100%;
            width: 100%;
            z-index: 2;

            & > span {
                display: none;
            }

            &:hover {
                text-decoration: none !important;
            }
        }
    }

    .blog-template__pagination {
        display: flex;
        justify-content: center;
        gap: 32px;
        margin-bottom: 38px;

        .page-numbers {
            font-size: var(--wp--preset--font-size--font-16-px);
            line-height: 24px;
            color: var(--wp--preset--color--black);
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }

            &.current {
                color: var(--wp--preset--color--black);
                text-decoration: none;
                border: 1px solid var(--wp--preset--color--black);
                border-radius: 4px;
                min-width: 30px;
                width: fit-content;
                padding: 0 10px;
                height: 30px;
            }
        }

        .prev, .next {
            font-size: var(--wp--preset--font-size--font-16-px);
            line-height: 24px;
        }
    }
}