.tipped { text-decoration: underline }

.tip {
    display:none;
    /*opacity: 0;*/
    max-width: 70vw;
    position: absolute;
    top: 0;
    left: 0;
    padding: 7px;
    border-radius: 4px;
    font-size: 15px;
    /*z-index: -99;*/
}

/*
.tipped:hover~.tip{
    opacity: 1;
    transition: opacity .20s;
    z-index: 1;
}
*/

.tip img {
    max-height: 300px;
}

.pointy {
    position: absolute;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
}

.desc {
    text-align: center;
    display: block;
    font-weight: normal;
    font-style: normal;
    line-height:1;
}

@media (max-width: 768px) {
    
    .tip {
        max-width: 300px;
    }
    
}