.tooltip-1 {
        position: relative;
    }

    .tooltip-1-show::before {
        content: attr(target-title);
        position: absolute;
        background-color: #444;
        left: 0;
        bottom: calc(100% + 0.6rem);
        color: #fff;
        padding: 0.5rem;
        max-width: 35rem;
        height: calc(100% + 1rem);
        border-radius: 0.2rem;
        z-index: 1000;
        font-size: 0.9rem;
        overflow: hidden;
        animation: heightAnimation 0.5s ease;
        transition: all 0.3s ease;
    }

    .tooltip-1-show::after {
        content: "";
        position: absolute;
        bottom: calc(100%);
        left: 1rem;
        width: 1rem;
        aspect-ratio: 1;
        background-color: #444;
        clip-path: polygon(50% 100%, 0 0, 100% 0);
        z-index: 10;
        animation: opacityAnimation 0.5s ease-in-out;
        transition: all 0.3s ease;
    }

    @keyframes heightAnimation {
        0% {
            opacity: 0;
            bottom: 80%;
            height: 0;
        }

        100% {
            bottom: calc(100% + 0.6rem);
            height: calc(100% + 1rem);
            opacity: 1;
        }
    }

    @keyframes opacityAnimation {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }