.thumbnail-st {
    cursor: pointer !important;
    transition: .5s, backdrop-filter 0;
    border: 1px solid rgba(30, 70, 121, 0.5);
    box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
    border-radius: 1rem;

    padding: 0.5rem;
    transition: 0.2s;
    display: block;
    text-decoration: none !important;
}

.thumbnail-st:hover {
    z-index: 1020;
    transform: scale(1.005);
    border-color: rgba(59, 123, 208, 0.9);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.box-link-course {
  height: 130px;
  display: flex;  
  justify-content: center;
  overflow: hidden;
  background-color: rgba(0,0,0, 0.06);
  border: 1px solid rgba(0,0,0, 0.1);
  border-radius: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px inset, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px inset;
  padding: 3px;

  position: relative;
}

.box-link-course > .img-course {
  width: 100%;
  height: 100%;
  border-radius: 5px !important;

  object-fit: contain;
  z-index: 1;

}

.blur-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 80px #fff) blur(70px) saturate(5);
}

.box-caption-st h5 {
    margin: 0;
    padding: 8px 0px;
}

[data-tooltip] {
    position: relative; 
    cursor: default;
}

[data-tooltip]::after {
    position: absolute;
    width: auto;
    /*left: calc(50% - 70px);*/
    left: 0;
    right: 0;
    z-index: 2;

    top: -1rem;
    width: 90%;
    margin-inline: auto;
    pointer-events: none;

    text-align: center;
    box-sizing: border-box;

    content: attr(data-tooltip);
    color: #fff;
    background-color: rgba(51,51,51, 0.88);
    backdrop-filter: blur(2.7px);
    box-shadow: 1px 1px 3px #222222;
    padding: 8px;
    border-radius: 10px;
    outline: 4px solid rgba(0,0,0,0.7);
    font-size: 12px;
    font-weight: lighter;

    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: 0.2s;

}

[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
