.keyword-placement-keyword {
    position: relative;
    color: rgb(66, 66, 232);
    text-decoration: underline;
    text-decoration-style: dotted;
}

.keyword-placement-keyword::after {
    content: "";
    position: fixed;
    top: 50%; /* Center vertically on the screen */
    left: 50%; /* Center horizontally on the screen */
    transform: translate(-50%, -50%); 
    display: none;
}

.keyword-placement-keyword:hover::after {
    display: block;
    width: 500px;
    height: 500px;
    background-image: var(--background);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    content: ""; /* Ensure content is generated for pseudo-element */
}

.keyword-placement-keyword:hover {
    cursor: pointer;
}

/* Media query for mobile devices */
@media (max-width: 600px) {
    .keyword-placement-keyword:hover::after {
        width: calc(100vw - 50px); /* Dynamic width */
        height: calc(100vw - 50px); /* Dynamic height */
    }
}