.container.main {
  display: flex;
  flex-direction: column;
  gap: 4rem;

  section {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .section-title-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;

      h2 {
        font-size: 1.5rem;
        font-weight: bold;

        a:hover {
          background: none;
        }
      }

      .button-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.25rem;

        a {
          padding: 0.5rem;
          color: #999;

          &:hover {
            color: #ccc;
            background: none;
          }

          &.active {
            color: #fff;
          }
        }
        button {
          margin-right: 0.5rem;
          border-radius: 50%;
          &:hover {
            .xi {
              color: #ccc;
            }
          }
          .xi {
            color: #999;
            padding: 0.5rem;
          }
        }
      }
    }
    .play-list-wrap {
      display: flex;
      gap: 1rem;
      overflow-x: auto;

      .play-list-wrap-in {
        padding: 0.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        border-radius: 0.5rem;

        .img-4-wrap {
          border-radius: 1rem;
          overflow: hidden;
          width: 10rem;
          height: 10rem;
          display: grid;
          grid-template-columns: repeat(2, 1fr);

          .img-4-wrap-in {
            width: 100%;
            height: 100%;
            background-color: #333;

            &:first-child {
              border-right: 1px solid #000;
              border-bottom: 1px solid #000;
            }
            &:nth-child(2) {
              border-left: 1px solid #000;
              border-bottom: 1px solid #000;
            }
            &:nth-child(3) {
              border-right: 1px solid #000;
              border-top: 1px solid #000;
            }
            &:last-child {
              border-top: 1px solid #000;
              border-left: 1px solid #000;
            }
          }
        }

        .play-list-name {
          font-size: 1rem;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .play-list-name-in {
            flex: 1;
            width: 100%;
            padding: 0.25rem 0;
            &:hover {
              background: none;
            }
          }
          .button-wrap {
            button {
              &:hover {
                background: none;
              }
              .xi {
                padding: 0.25rem;
                font-size: 1rem;
              }
            }
          }
        }
      }
    }

    .music-list-wrap {
      display: flex;
      gap: 1rem;
      align-items: center;
      flex-wrap: wrap;

      &.music-list-only-1 {
        gap: 0.25rem;

        .music-list-wrap-in {
          width: 100%;
          padding: 0.5rem;
          border-radius: 0.5rem;
          background: #000;

          &:hover {
            background: #222;
          }

          .img-wrap {
            width: 3.5rem;
            height: 3.5rem;
          }

          .music-info-wrap {
            .title {
              font-size: 1rem;
            }
            .artist {
              font-size: 0.85rem;
            }
            &:hover {
              background: none;
            }
          }
        }
      }

      .music-list-wrap-in {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: calc(25% - 0.75rem);
        gap: 0.5rem;

        .img-wrap {
          width: 5rem;
          height: 5rem;
          border-radius: 0.5rem;
        }
        .music-info-wrap {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          flex: 1;
          overflow: hidden;

          &:hover {
            background: none;
          }

          .title {
            padding: 0.25rem;
            font-size: 1rem;
            width: 100%;

          }

          .artist {
            padding: 0.25rem;
            color: #999;
            width: 100%;
            text-align: left;

            &:hover {
              background: none;
            }
          }
        }
        .button-wrap {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          gap: 0.15rem;

          button, .orderby-btn {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            .xi {
              font-size: 1.25rem;
              color: #999;
              padding: 0.5rem;
            }
          }
        }
      }
    }
  }
}