:root {
    --width-tooltip:420px;
}

.tooltip2 {
    display: none;
    text-align: end;
    height: 30px;
    width:var( --width-tooltip);
    z-index: 99;
    margin-bottom: -15px;
}
.x-button {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    border-radius: 50%;
    margin: 6px;
    right: 0;
}

.x-button img {
    height: 100%;
    width: 100%;
}

.tooltip2 .tooltip-text {
    --width-tooltip:420px;
    box-shadow: 1px 1px 5px 1px #D3D3D3;
    width: var(--width-tooltip);
    background-color: white;
    color: black;
    border-radius: 6px;
    transition: opacity 1s;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0 auto;
    padding: 1.2rem;
    word-break: break-word;
    box-sizing: border-box;
    text-align: left !important;
}


#container-sponsored-text {
    text-align: end;
    margin-inline-end: 5px;
    margin-bottom: 5px;
    font-size: 10px;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

#sponsored-text:hover {
    cursor: pointer;
    color: red;
}

.x-button img:hover {
    cursor: pointer;
    opacity: 0.8;
}

@media screen and (max-width: 600px) {
    :root {
        --width-tooltip:220px;
    }

    .tooltip2 {
        width: 200px;
    }

    .tooltip2 .tooltip-text {
        width: auto;
        height: auto;
    }
}