.tooltip-container {
    position: relative;
}
.tooltip {
    position: absolute;
    z-index: 10;
    bottom: calc(102% + 8px);
    left: calc(-50% + 0.4rem);
    text-align: center;
    width: max-content;
    padding: 0.4rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.86rem;
    line-height: 1.26;
    will-change: transform;
    max-width: 16rem;
}

    .tooltip--light {
        background-color: var(--light);
        box-shadow: var(--shadow--light);
        color: var(--dark);
    }
    .tooltip--lighter {
        background-color: var(--lighter);
        box-shadow: var(--shadow--lighter);
        color: var(--dark);
    }
    .tooltip--transparent {
        background-color: transparent;
        box-shadow: none;
        color: inherit;
        padding: 0;
    }

    .tooltip--right {
        top: 0;
        bottom: 0;
        left: 100%;
    }

    .tooltip--top {
        left: -1000%;
        right: -1000%;
        margin: auto;
    }

    .tooltip--top-left {
        text-align: right;
        right: calc(0% - 0.6rem);
        left: auto;
    }

@media screen and (max-width: 992px) {
    .tooltip {
        transition-delay: 0 !important;
    }
}

@media screen and (max-width: 800px) {
    .tooltip {
        max-width: 85vw;
    }
}