.card-container{
  position: relative;
  display: grid;
  
  justify-content: center;
  justify-self: center;
  justify-items: center;
  align-items: center;
  align-content: center;
  
  
  gap: 2vw;
   /*
   todo later refactor old css files, in free time, to remove "!important"'s and global line-height
   */
}

.app-card{
  position: relative;
  display: inline-block;
}

.app-media{
  position: absolute;
  width: 100%;
  height: 100%;
  display: grid;
  mask-image: radial-gradient(circle at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 70%);
  transition: opacity var(--transition-time) ease-in-out;
}

.app-media img{
  width: 100%;
  height:100%;
  object-fit:contain !important;
}

.app-title{
  position: absolute;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;  
}

.app-title a{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  
  font-family: "Teko", sans-serif;
  font-weight: 700;
  line-height: 100%;
  color: var(--triad2) !important;
  filter:
  drop-shadow(0vw 0vw 0.75vw var(--triad1))
  drop-shadow(0vw 0vw 0.75vw var(--triad1))
  drop-shadow(0vw 0vw 0.75vw var(--triad1))
  !important;
  transition: all var(--transition-time);
}

.app-card:hover .app-title a{
  color: var(--triad1dark) !important;
  filter:
  drop-shadow(0px 0px 0.75vw var(--triad1))
  drop-shadow(0px 0px 0.75vw var(--triad1))
  drop-shadow(0px 0px 0.75vw var(--triad1))
  !important;
}

.app-card .app-title a::after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 100%);
  
  background-color: var(--triad2dark);
  color: var(--triad2);
  font-family: "Teko", sans-serif;
  font-weight: 700;
  
  content: attr(data-title); /* Use a custom attribute for the tooltip text */
  opacity: 0;
  visibility: hidden;
  white-space: nowrap;
  transition: opacity var(--transition-time), visibility var(--transition-time);
}

.app-card:hover .app-title a::after {
  opacity: 1;
  visibility: visible;
  transition-delay: var(--transition-delay);
}

.app-card:hover .app-media{
  opacity: 0.1;
}

.lazy{
  opacity: 0.0;
}

.lazy:hover{
  opacity: 1;
  transition-duration: var(--transition-time);
}