.tooltip-container {position: relative;}
.tooltip {
    position: absolute;
    display: flex;
    flex-direction: column;
    right: -1rem;
    width: 15rem;
    margin-top: .5rem;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #ccc;
    filter: drop-shadow(0 2px 6px rgb(0 0 0 / 15%));
    font-size: .875em;
    padding: .5em;
    outline: 0;
    z-index: 2;
}
.tooltip:before, .tooltip:after {
    content: "";
    right: 15%;
    transform: translateX(50%);
    height: 0;
    width: 0;
    position: absolute;
}
.tooltip:before {
    top: -11px;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 11px solid #ccc;
}
.tooltip:after {
    top: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #FFF;
}
.tooltip .description {
    padding: 0.5rem;
}

.tooltip button {
    border: 0;
    padding: 0;
}
.tooltip button:before {
   content: "\00D7";
   font-size: 1.5rem;
   font-weight: 300;
   color: #c8102e;
   padding: .25rem;
   top: .25rem;
   right: .25rem;
   position: absolute;
}


/* 750px */
@media (max-width: 46.875em) {
    .tooltip-container {position: static;}
    .tooltip {right: 50%; transform: translateX(50%);}
    .tooltip:before, .tooltip:after {content: none;}
}