.content__item {
  container: content / inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%;

  .content__badge {
    position: absolute;
    top: 0;
    left: 0rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
  }

  .content__badge--new {
    background-color: var(--color-success);
  }

  .content__badge--recommendation {
    background-color: #b254ff;
  }

  .content__badge--popularity {
    background-color: var(--color-warning);
  }

  .content__badge--all {
    background-color: #f6791e;
  }

  .content__badge--three {
    background-color: #33cc00;
  }

  .content__badge--four {
    background-color: #19a4e5;
  }

  .content__badge--five {
    background-color: #fd4572;
  }

  .content__badge.hidden {
    display: none;
  }

  .content__best {
    display: none;
    position: absolute;
    top: -1.6rem;
    left: -1.6rem;

    img {
      width: 19.2rem;
    }
  }

  .content__character {
    display: none;
    position: absolute;
    top: -5.6rem;
    right: 1.6rem;

    img {
      width: 24.4rem;
    }
  }

  .content__thumb {
    border-radius: 1.5rem;
    overflow: hidden;

    img {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
    }
  }

  .content__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-md);

    .content__info {
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0;

      gap: var(--spacing-md);

      .content__info-subject {
        aspect-ratio: 1/1;
        border-radius: 100%;
        overflow: hidden;

        img {
          width: 100%;
          aspect-ratio: 1/1;
          object-fit: cover;
        }
      }

      .content__info-title {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .content__info > div:last-child {
      flex: 1;
      min-width: 0;
    }

    .content__like {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      aspect-ratio: 1/1;
      border-radius: 100%;
      background-color: var(--color-white);

      .content__like-icon {
        aspect-ratio: 1/1;
        color: var(--color-gray-400);
      }
    }

    .content__like.active {
      .content__like-icon {
        color: var(--color-warning);
      }
    }
  }
}

.content__playlist { 
  container: playlist / inline-size;
  width: 100%;
  position: relative;

  img {
    width: 100%;
    aspect-ratio: 4/3; 
    object-fit: cover;
    border-radius: 1.5rem;
  }
}

.content__playlist-title-wrapper {
  position: absolute;
  top: 20%;
  left: 10%;
  width: fit-content;
}

.content__playlist-title {
  position: relative;
  z-index: 2;
}

.content__playlist-under-line {
  position: relative;
  z-index: 1;
  transform: translateY(-1.2rem);
  width: 100%;
  height: 1.6rem;
  background-color: #2ab2f0;
  border-radius: 0.8rem;
}

.content__playlist.hidden {
  display: none;
}

.content__loading-spinner {
  width: 5.6rem;
  margin: 0 auto;

  img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    animation: spin 1s linear infinite;
  }
}

.content__loading-spinner.hidden {
  display: none;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.content__observer {
  height: 2.4rem;
}

@container content (max-width: 360px) {
  .content__badge {
    width: 5.2rem;
    height: 2.6rem;
    border-radius: 0 0 1rem 1rem;
    font-size: var(--font-body-small-size);
    font-weight: var(--font-body-small-m-weight);
    line-height: var(--font-body-small-line-height);
    letter-spacing: var(--font-body-small-letter-spacing);
  }

  .content__badge--playlist {
    width: 8rem;
    height: 2.6rem;
  }

  .content__bottom {
    .content__info {
      .content__info-subject {
        width: 3.6rem;
      }
    }

    .content__info-title {
      font-size: var(--font-title-small-size);
      font-weight: var(--font-title-small-m-weight);
      line-height: var(--font-title-small-line-height);
      letter-spacing: var(--font-title-small-letter-spacing);
    }

    .content__info-subtitle {
      font-size: var(--font-label-small-size);
      font-weight: var(--font-label-small-m-weight);
      line-height: var(--font-label-small-line-height);
      letter-spacing: var(--font-label-small-letter-spacing);
    }

    .content__like {
      width: 3.6rem;

      .content__like-icon {
        width: 3.2rem;
      }
    }
  }
}

@container content (min-width:361px) and (max-width: 480px) {
  .content__badge {
    width: 6rem;
    height: 3rem;
    border-radius: 0 0 1.2rem 1.2rem;
    font-size: var(--font-body-medium-size);
    font-weight: var(--font-body-medium-m-weight);
    line-height: var(--font-body-medium-line-height);
    letter-spacing: var(--font-body-medium-letter-spacing);
  }

  .content__badge--playlist {
    width: 8.8rem;
    height: 3rem;
  }

  .content__bottom {
    .content__info {
      .content__info-subject {
        width: 4rem;
      }
    }

    .content__info-title {
      font-size: var(--font-title-medium-size);
      font-weight: var(--font-title-medium-m-weight);
      line-height: var(--font-title-medium-line-height);
      letter-spacing: var(--font-title-medium-letter-spacing);
    }

    .content__info-subtitle {
      font-size: var(--font-label-medium-size);
      font-weight: var(--font-label-medium-m-weight);
      line-height: var(--font-label-medium-line-height);
      letter-spacing: var(--font-label-medium-letter-spacing);
    }

    .content__like {
      width: 4rem;

      .content__like-icon {
        width: 3.6rem;
      }
    }
  }
}

@container content (min-width: 481px) {
  .content__badge {
    width: 6.8rem;
    height: 3.4rem;
    border-radius: 0 0 1.4rem 1.4rem;
    font-size: var(--font-body-large-size);
    font-weight: var(--font-body-large-m-weight);
    line-height: var(--font-body-large-line-height);
    letter-spacing: var(--font-body-large-letter-spacing);
  }

  .content__badge--playlist {
    width: 10.4rem;
    height: 3.4rem;
  }

  .content__bottom {
    .content__info {
      .content__info-subject {
        width: 4.4rem;
      }
    }

    .content__info-title {
      font-size: var(--font-title-large-size);
      font-weight: var(--font-title-large-m-weight);
      line-height: var(--font-title-large-line-height);
      letter-spacing: var(--font-title-large-letter-spacing);
    }

    .content__info-subtitle {
      font-size: var(--font-label-large-size);
      font-weight: var(--font-label-large-m-weight);
      line-height: var(--font-label-large-line-height);
      letter-spacing: var(--font-label-large-letter-spacing);
    }

    .content__like {
      width: 4.4em;

      .content__like-icon {
        width: 4rem;
      }
    }
  }
}

@container playlist (max-width: 360px) {
  .content__playlist-title {
    font-size: var(--font-headline-medium-size);
    font-weight: 700;
    line-height: var(--font-headline-medium-line-height);
    letter-spacing: var(--font-headline-medium-letter-spacing);
  }
}

@container playlist (min-width: 361px) and (max-width: 480px) {
  .content__playlist-title {
    font-size: var(--font-display-small-size);
    font-weight: 700;
    line-height: var(--font-display-small-line-height);
    letter-spacing: var(--font-display-small-letter-spacing);
  }
}

@container playlist (min-width: 481px) {
  .content__playlist-title {
    font-size: var(--font-display-medium-size);
    font-weight: 700;
    line-height: var(--font-display-medium-line-height);
    letter-spacing: var(--font-display-medium-letter-spacing);
  }
}