.tooltip-container {
    position: relative;
}

.tooltip {
    position: absolute;
    left: 105%;
    top: 50%;
    transform: translateY(-50%) scale(0.95);
    width: 15vw;
    padding: 12px;
    background: #020617;
    border: 1px solid #334155;
    border-radius: 8px;
    color: var(--text);
    font-size: 0.85rem;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 1000;
}
.tooltip iframe {
    display: block;
    border: none;
}

.tooltip--below {
    left: 50%;
    top: 100%;
    width: min(320px, 80vw);
    transform: translate(-50%, 0) scale(0.95);
}

.tooltip-container:hover > .tooltip:not(.tooltip--below), /* Black Magic CSS I 'Borrowed' */
.tooltip-container:focus-within > .tooltip:not(.tooltip--below) {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    z-index: 1000;
}

.tooltip-container:hover > .tooltip--below,
.tooltip-container:focus-within > .tooltip--below {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    z-index: 1000;
}

@media (max-width: 1024px) {
    .tooltip-container > .tooltip:not(.tooltip--below) {
        left: auto;
        right: 0;
        top: 100%;
        width: 100%;
        font-size: 0.8rem;
        transform: translateY(0) scale(0.95);
    }

    .tooltip-container:hover > .tooltip:not(.tooltip--below),
    .tooltip-container:focus-within > .tooltip:not(.tooltip--below) {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}