.BlogListing {
    padding: 100px 0;

    @media (max-width: 1200px) {
        padding: 80px 0;
    }

    @media (max-width: 768px) {
        padding: 60px 0;
    }

    .BlogGrid {
        display: flex;
        align-items: center;
        gap: 24px;
        flex-flow: row wrap;

        @media (max-width: 768px) {
            gap: 16px;
        }

        .GridItem {
            width: calc(33.33% - 16px);

            @media (max-width: 992px) {
                width: calc(50% - 12px);
            }

            @media (max-width: 576px) {
                width: 100%;
            }

            .Image {
                aspect-ratio: 480/378;
                width: 100%;
                overflow: hidden;
                border-radius: 16px;

                @media (max-width: 768px) {
                    border-radius: 12px;
                }

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            span {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-top: 16px;
                color: var(--white-color);
                font-weight: 400;
                font-size: 15px;

                @media (max-width: 768px) {
                    font-size: 14px;
                    margin-top: 12px;
                }

                @media (max-width: 480px) {
                    font-size: 13px;
                }
            }

            h3 {
                color: var(--white-color);
                font-weight: 500;
                font-size: 27px;
                text-transform: capitalize;
                margin-top: 15px;

                @media (max-width: 1200px) {
                    font-size: 24px;
                }

                @media (max-width: 768px) {
                    font-size: 20px;
                }

                @media (max-width: 480px) {
                    font-size: 18px;
                }
            }

            a {
                font-size: 14px;
                border-radius: 50px;
                padding: 10px 20px;
                border: 1px solid var(--white-color);
                color: var(--white-color);
                text-decoration: none;
                transition: all 0.3s ease;
                display: inline-block;
                margin-top: 15px;

                @media (max-width: 480px) {
                    font-size: 13px;
                    padding: 8px 16px;
                }

                &:hover {
                    background-color: var(--primary-color);
                    color: var(--white-color);
                    border-color: var(--primary-color);
                }
            }
        }
    }
}