.hne-topic-grid {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    ul {
        list-style: none;
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0;
        margin: 0;
        @media (min-width: 768px) {
            grid-template-columns: repeat(2, 1fr);
        }

        li {
            position: relative;
            overflow: hidden;
            a {
                text-decoration: none;
                color: var(--wp--preset--color--gray-text);

                .title {
                    margin-top: 1.25rem;
                    font-size: 1.5rem;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    &:after {
                        content: '';
                        width: 20px;
                        height: 20px;
                        background-image: url("data:image/svg+xml, %3Csvg%20width=%2220%22%20height=%2220%22%20viewBox=%220%200%2020%2020%22%20fill=%22none%22%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cg%20clip-path=%22url(%23clip0_195_11890)%22%3E%0A%3Cpath%20d=%22M20%2016.817L16.8333%2020V5.41811L2.2344%2020L0.00353432%2017.7529L14.5819%203.16746H0L3.16675%200H19.9993V16.817H20Z%22%20fill=%22%23333333%22%2F%3E%0A%3C%2Fg%3E%0A%3Cdefs%3E%0A%3CclipPath%20id=%22clip0_195_11890%22%3E%0A%3Crect%20width=%2220%22%20height=%2220%22%20fill=%22white%22%2F%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E%0A");
                        background-repeat: no-repeat;
                        background-size: contain;
                        margin-left: 14px;
                        filter: brightness(0) saturate(100%) invert(62%) sepia(67%) saturate(6047%) hue-rotate(349deg) brightness(99%) contrast(91%);
                        transition: transform 0.3s ease-in-out;
                    }
                }

                &:hover {
                    .title {
                        text-decoration: underline;
                        &:after {
                            transform: rotate(90deg);
                        }
                    }
                    img {
                        transform: scale(1.05);
                    }
                }
            }
            img {
                width: 100%;
                aspect-ratio: 223 / 121;
                height: auto;
                display: block;
                object-fit: cover;
                transition: 0.3s;
            }
        }
    }
}