/*
-> still open about image on-hover scaling
-> TODO: see if you can define different image sizing for different image dimensions with queries
*/

.album-card {
  display: flex;
  width: 280px;
  height: 280px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  margin: auto;
  background-color: var(--cl-background);
}

.album-card img {
  transition: all 0.3s ease;
  width: auto;
  height: 280px;
  overflow: hidden;
  border-radius: 1.8px;
  justify-content: center;
  opacity: 1;
}

.album-card img:hover {
  transform: translateZ(-2px) scale(1.03);
  transition: 200ms ease-in-out;
  opacity: 0.6;
}

.card-content {
  display: none;
  flex-direction: column;
  position: absolute;
  bottom: 0;
  width: 100%;
  /* background-image: linear-gradient(to bottom, transparent, var(--cl-background) 95%); */
  transition: 200ms;
}

.card-content h3 {
  font-size: 2rem;
  text-transform: uppercase;
}

.album-card:hover .card-content {
  display: flex;
}