#home {
  margin-top: 12.8rem;

  .content__wrapper {
    .content__item {
      .content__badge {
        display: none;
      }
    }

    .content__item:nth-child(-n + 6) {
      .content__badge {
        display: flex;
      }
    }

    .content__item:nth-child(4n + 10) {
      .content__badge {
        display: flex;
      }
    }

    .content__item:nth-child(n + 14):nth-child(-n + 17) {
      .content__badge {
        display: flex;
      }
    }
  }

  @media (max-width: 640px) {
    .content__playlist {
      grid-column: 1;
      grid-row: 9;
    }
  }

  @media (min-width: 640px) and (max-width: 1024px) {
    .content__playlist {
      grid-column: 1 / span 2;
      grid-row: 5 / span 2;

      img {
        aspect-ratio: 8/3;
      }

      .content__playlist-title-wrapper {
        top: 36%;
        left: 12%;
        font-size: var(--font-display-large-size);
        font-weight: var(--font-display-large-m-weight);
        line-height: var(--font-display-large-line-height);
        letter-spacing: var(--font-display-large-letter-spacing);
      }
    }
  }

  @media (min-width: 1024px) and (max-width: 1280px) {
    .content__playlist {
      grid-column: 3;
      grid-row: 3;
    }
  }

  @media (min-width: 1280px) {
    .content__wrapper {
      .content__item:nth-child(6) {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
        padding: 4rem 4rem 2.5rem 4rem;
        border-radius: 2rem;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3e%3crect width='100%25' height='100%25' rx='20' ry='20' fill='none' stroke='%23A7A7A7' stroke-width='1' stroke-dasharray='10 6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-size: 100% 99%;

        .content__best {
          display: block;
        }
      }

      .content__item:nth-child(6) {
        .content__badge {
          display: none;
        }
      }

      .content__item:nth-child(7) {
        .content__badge {
          display: flex;
        }
      }

      .content__item:nth-child(n + 15):nth-child(-n + 17) {
        .content__badge {
          display: none;
        }
      }

      .content__playlist {
        grid-column: 4;
        grid-row: 3;
      }

      .content__skeleton-item:nth-child(6) {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
        padding: 4rem 4rem 2.5rem 4rem;
        border-radius: 2rem;
      }
    }
  }
}