section.blog {
    .items {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        .item {
            background: var(--white);
            box-shadow: 0 4px 10px 0 rgba(39, 42, 56, 0.2);
            padding: 30px;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            height: 560px;
            img {
                height: 260px;
                object-fit: cover;
                border-radius: 5px;
            }
            h3 {
                margin-top: 30px;
                font-weight: 600;
                font-size: 22px;
                font-family: var(--font-main);
                color: var(--dark);
                padding-bottom: 10px;
                position: relative;
                max-width: 90%;
                margin-bottom: 20px;
                &::after {
                    content: '';
                    width: 120px;
                    height: 2px;
                    background: var(--blue);
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    border-radius: 1px;
                    transition: .3s linear;
                }
            }
            .btn {
                margin-top: auto;
                margin-bottom: 0;
            }
        }
    }
    .pagination {
        display: flex;
        margin: 40px 0 100px;
        justify-content: center;
        align-items: center;
        .btn, p {
            display: flex;
            color: var(--dark);
            border: none;
            height: 40px;
            width: 40px;
            padding: 0;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-family: var(--font-main);
            font-weight: 600;
            &::before {
                font-family: icon;
                color: var(--dark);
                font-size: 12px;
            }
            &.active {
                background: var(--blue);
                color: var(--white);
            }
        }
        .prev {
            &::before {
                content: '\e90a';
            }
        }
        .next {
            &::before {
                content: '\e912';
            }
        }
        .pages {
            display: flex;
        }
    }
}
@media screen and (max-width: 1439px) {
    section.blog {
        .items {
            grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
            .item {
                h3 {
                    font-size: 20px;
                }
                .btn {
                    width: 220px;
                }
            }
        }
    }
}
@media screen and (max-width: 767px) {
    section.blog {
        .items {
            grid-template-columns: 1fr;
            .item {
                padding: 20px;
                height: 540px;
                h3 {
                    font-size: 16px;
                    max-width: unset;
                }
                .btn {
                    width: 200px;
                    height: 36px;
                }
            }
        }
    }
}