.recent-posts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;

    .featured {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 8px;
        overflow: hidden;

        &:after {
            content:'';
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            height: 40%;
            background: linear-gradient(to top, #000000, #00000000);
            pointer-events: none;
        }

        &:hover {
            img {
                transform: scale(1.2);
            }
        }

        .featured-post-thumbnail {
            height: 100%;
            width: 100%;
            position: relative;
            z-index: 1;

            img {
                height: 100% !important;
                object-fit: cover;
                transition: all .3s ease;
            }
        }

        .post-category {
            position: absolute;
            top: 15px;
            left: 15px;
            font-weight: 550;
            z-index: 2;
        }

        .post-info {
            position: absolute;
            bottom: 15px;
            left: 15px;
            right: 15px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 2;
            pointer-events: none;

            h3 {
                color: #fff;
                font-size: 25px;
                text-transform: uppercase;
                font-weight: 600;
            }

            p {
                color: #fff;
                font-size: 18px;
                font-weight: 300;
                line-height: 1.4;
            }

            .post-action {
                display: none;
            }
        }
    }

    .post-items {
        display: flex;
        flex-direction:column;
        gap: 15px;

        .post {
            display: grid;
            grid-template-columns: .5fr 1fr;
            align-items: center;
            gap: 22px;

            .thumbnail-wrapper {
                border-radius: 8px;
                overflow: hidden;
                height: 114px;

                img {
                    height: 100% !important;
                    object-fit: cover;
                    transition: all .3s ease;
                }
            }

            &:hover {
                .thumbnail-wrapper {
                    img {
                        transform:scale(1.2);
                    }
                }
            }

            .post-info {
                display: flex;
                flex-direction: column;
                gap: 15px;

                h3 {
                    font-size: 25px;
                    text-transform: uppercase;
                    font-weight: 600;

                    a {
                        color: #000;
                    }
                }
                .post-category {
                    border-radius: 5px;
                    color: white;
                    text-transform: uppercase;
                    padding: 5px 10px;
                    width: fit-content;
                    font-weight: 550;
                    z-index: 2;
                }

                .post-excerpt {
                    display: none;
                }
            }
        }
    }
}

@media screen and (max-width: 1290px) {
    .recent-posts {
        padding: 0 20px;
    }
}

@media screen and (max-width: 1024px) {
    .recent-posts {
        grid-template-columns: 1fr;
        padding: 0;
    }
}

@media screen and (max-width: 500px) {
        .mobile-hidden {
            display: none !important;
        }
    .recent-posts {
        gap: 150px;

        .post-category {
            font-size: 15px;
        }

        .featured {
            height: 100%;
            overflow: visible;

            &:after {
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 8px;
            }

            .featured-post-thumbnail {
                height: 305px;
                width: 100%;
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 8px;

                img {
                    height: 100% !important;
                    border-radius: 8px;
                }
            }
            .post-info {
                background: #fff;
                padding: 20px;
                border-radius: 8px;
                width: 89%;
                z-index: 2;
                bottom: -127px;
                left: 20px;
                pointer-events: all;
                .post-title {
                    font-size: 24px;
                    color: #000;

                    a {
                        color: #000;
                    }
                }
                .post-excerpt {
                    font-size: 16px;
                    color: #000;
                    line-height: 1.3;
                    font-weight: 300;
                    display: flex;
                }
                .post-action {
                    display: flex;
                    justify-content: flex-end;
                    align-items: flex-end;
                    color: #fff;
                    text-align: center;
                    border-radius: 5px;
                    font-weight: 600;

                    img {
                        width: 30px;
                        height: 17px;
                    }
                }
            }
        }

        .post-items {
            gap: 20px;

            .post {
                grid-template-columns: 1fr;
                gap: 0;
                position: relative;

                .thumbnail-wrapper {
                    height: 200px;
                }

                .post-info {
                    gap: 10px;
                    background: #ffffff;
                    padding: 12px;
                    border-bottom-left-radius: 8px;
                    border-bottom-right-radius: 8px;

                    .post-title {
                        font-size: 20px;
                    }
                    .post-excerpt {
                        font-size: 16px;
                        color: #000;
                        line-height: 1.3;
                        font-weight: 300;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                    }
                }

                
                .post-category {
                    position: absolute;
                    top: 15px;
                    left: 15px;
                    font-weight: 600;
                    z-index: 2;
                }
            }
        }
    }
}