.blog {
    .items {
        margin-top: 80px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(360px, 400px));
        gap: 20px;
        .item {
            display: flex;
            align-items: center;
            justify-content: end;
            position: relative;
            flex-direction: column;
            border-radius: 20px;
            background: var(--dark-b);
            overflow: hidden;
            transition: .2s linear;
            height: 400px;
            img {
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                border-radius: 20px;
                object-fit: cover;
                z-index: 0;
            }
            .data {
                padding: 40px 20px;
                position: absolute;
                bottom: -100px;
                left: 0;
                z-index: 9;
                align-self: end;
                border-radius: 20px;
                background: linear-gradient(0deg, rgba(33, 33, 33, .9) 70%, rgba(0, 0, 0, 0) 100%);
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
                transition: .2s linear;
                .meta {
                    display: flex;
                    gap: 10px;
                    align-items: center;
                    margin-bottom: 5px;
                    transition: .2s linear;
                    p {
                        font-size: 14px;
                        color: var(--white-70);
                    }
                }
                h3 {
                    font-size: 20px;
                    font-weight: 500;
                    margin-bottom: 20px;
                }
                .short-desc {
                    font-size: 14px;
                    color: var(--white-70);
                }
            }
            a {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                z-index: 99;
            }
        }
    }
}
@media screen and (max-width: 1279px) {
    section.blog {
        .headline {
            p {
                br {
                    display: none;
                }
            }
        }
        .items {
            grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
            .item {
                .data {
                    padding: 20px;
                    bottom: 0;
                    backdrop-filter: blur(10px);
                    -webkit-backdrop-filter: blur(10px);
                    .meta {
                        opacity: 1;
                        visibility: visible;
                        margin-bottom: 10px;
                        p {
                            font-size: 12px;
                        }
                    }
                    h3 {
                        font-size: 18px;
                    }
                    .short-desc {
                        font-size: 14px;
                    }
                }
            }
        }        
    }
}
@media screen and (hover: hover) {
    section.blog .items .item:hover {
        box-shadow: var(--shadow-main);
        .data {
            bottom: 0;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            .meta {
                opacity: 1;
                visibility: visible;
            }
        }
    }
}