@media screen and (min-width: 0px) {
    .customEntitityAlbum {
        background-color: aliceblue;
        position: relative;
        min-width: 60px;
        width: 60px;
        height: 60px;
        margin: 0px;
        margin-left: 8px;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 0px;
        object-fit: contain;
        border-radius: 4%;
    }
}

@media screen and (min-width: 700px) {
    .customEntitityAlbum {
        background-color: aliceblue;
        position: relative;
        min-width: 80px;
        width: 80px;
        height: 80px;
        margin: 0px;
        margin-left: 8px;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 0px;
        object-fit: contain;
        border-radius: 4%;
    }

}

@media screen and (min-width: 1250px) {
    .customEntitityAlbum {
        background-color: aliceblue;
        position: relative;
        min-width: 100px;
        width: 100px;
        height: 100px;
        margin: 0px;
        margin-left: 8px;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 0px;
        object-fit: contain;
        border-radius: 4%;
    }
}

td {
    vertical-align: middle !important;
}

.status-done svg {
  color: var(--md-accent-fg-color);
  animation: tick-pop 400ms ease-out both;
}

.status-pending svg {
  color: var(--md-accent-fg-color--transparent);
  animation: tick-pop 400ms ease-out both;
}

.cards li:nth-child(1) .status-done svg { animation-delay: 0ms; }
.cards li:nth-child(2) .status-done svg { animation-delay: 80ms; }
.cards li:nth-child(3) .status-done svg { animation-delay: 160ms; }

@keyframes tick-pop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  70% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}