@import "./variables";
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.3rem;
}

.card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  color: $quite-black;
  border-radius: 0.5rem;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  transition: 0.2s;
  user-select: none;
  animation: sweep 0.3s ease-in-out;

  &:hover {
    color: $primary;
    box-shadow: 3px 6px 8px 0 #1e1e1e12;
    transform: translateY(-3px);

    .card__image {
      img {
        transform: scale(1.1);
      }
    }
  }

  &__image {
    width: 100%;
    height: 150px;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: 0.2s;
    }
  }

  &__content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
  }

  &__row {
    display: flex;
    margin-top: 2.5rem;
    flex-direction: row;
    justify-content: space-between;

    > .card__artist {
      flex-grow: 0;
    }
  }

  &__title {
    font-size: 1.2rem;
    font-weight: 800;
  }

  &__rank {
    font-size: 0.9rem;
  }

  &__artist {
    font-size: 0.9rem;
    font-style: italic;
    flex-grow: 1;
    margin-top: 0.2rem;
    line-height: 1.3rem;
  }

  &__album {
    font-size: 0.8rem;
    color: #5b5757;
  }

  &__nodata {
    grid-column-end: 4;
    grid-column-start: 1;
    align-items: start;
    > .card__content {
      align-items: start;
    }
  }
}

@media screen and (max-width: $br-mobile) {
  .grid {
    display: flex;
    flex-direction: column;
  }
}
