#albums-content {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}
.album-item {
  width: calc((100% - 3rem) / 3);
  height: calc((1020px - 3rem) / 3);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  border-radius: 0.8rem;
  background: var(--background-color);
  padding: 12px;
  box-shadow: var(--meow-card-shadow);
  color: var(--font-color);
}
.album-item[column='2'] {
  width: calc((100% - 1.5rem) / 3 * 2);
}
.album-item[column='3'] {
  width: 100%;
}
.album-item:hover {
  animation: beat 0.8s ease-in-out infinite;
  color: var(--theme-color);
}
.album-item:hover .album-name {
  font-weight: bold;
}
.album-cover {
  height: 90%;
  overflow: hidden;
  border-radius: 0.8rem;
}
.album-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.album-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.album-name .icon {
  height: 0.9rem;
}
@media (max-width: 900px) {
  #albums-content {
    column-gap: 0.65rem;
  }
  .album-item {
    width: calc((100% - 0.65rem) / 2);
    height: calc((433px - 0.65rem) / 2);
  }
  .album-item[column='2'] {
    width: 100%;
  }
}