/* Grid Container */
      .music-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: flex-start;
      }
  
      /* Card Styles */
      .music-item {
        overflow: hidden;
        flex: 1 1 calc(25% - 1rem);
        max-width: calc(25% - 1rem);
        transition: transform 0.3s ease;
        display: flex;
        flex-direction: column;
        cursor: pointer;
      }
      .music-item:hover {
        transform: scale(1.02);
      }
  
      /* Figure & Overlay */
      .music-item figure {
        position: relative;
        overflow: hidden;
        margin: 0;
      }
      .music-item img {
        display: block;
        width: 100%;
        height: auto;
      }
  
      /* Transparent overlay with centered text (hidden by default) */
      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease, background-color 0.3s ease;
      }
      .overlay-text {
        color: #fff;
        font-size: 1.2rem;
        font-weight: bold;
        text-align: center;
        pointer-events: none;
      }
      .music-item:hover .overlay {
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.6);
      }
  
      /* Info Section */
      .music-info {
        flex: 1;
        display: flex;
        flex-direction: column;
      }

      .music-info h2 {
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
        margin-top: 0.85rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .music-info p {
        font-size: 0.9rem;
        color: #aaa;
        margin-bottom: 0.5rem;
      }
  
      /* Link Buttons */
      .links {
        display: flex;
        gap: 0.5rem;
        margin-top: auto;
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
      }
      .links a {
        display: inline-block;
        text-decoration: none;
        padding: 0.4rem 0.75rem;
        font-size: 0.7rem;
        border-radius: 1px;
        background-color: #333;
        color: #fff;
        transition: background-color 0.2s;
      }
      .links a:hover {
        background-color: #555;
      }
  
  
      /* Song Meta */
  .song-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      margin-bottom: 20px;
  }
  
  /* Artists Section */
  .song-artists {
      font-size: 1rem;
      font-weight: bold;
      color: var(--color-white);
      display: flex;
      align-items: center;
      gap: 16px;
  }
  
  .artist-avatar {
      width: 48px !important;
      height: 48px;
      border-radius: 2px;
      object-fit: cover;
  }
  
  .artist-details {
      display: flex;
      flex-direction: column;
  }
  
  .artist-label {
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--color-grey-200);
  }
  
  .artist-name {
      font-size: 1.1rem;
      font-weight: bold;
      color: var(--color-white);
  }
  
  /* Social Icons */
  .social-icons {
      display: flex;
      gap: 12px;
  }
  
  .social-link {
      color: var(--color-white);
      font-size: 1.5rem;
      transition: color 0.3s ease;
  }
  
  .social-link:hover {
      color: var(--color-red-500);
  }
  
  /* Mobile Adjustments */
  @media (max-width: 768px) {
      .song-meta {
          align-items: center;
          text-align: center;
          gap: 16px;
      }
  
      .artist-details {
          text-align: left;
      }
  }
  
  
      /* Mobile: single column */
      @media (max-width: 600px) {
        .music-item {
          flex: 1 1 100%;
          max-width: 100%;
        }
        .music-info {
          padding-left: 1rem;
        }
        .music-grid {
          gap: 2rem;
        }
      }
  
      /* Modal Styles */
      #modalOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.7);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 1000;
      }
      .modal-content {
        background: #222;
        padding: 1.5rem;
        border-radius: 6px;
        max-width: 90%;
        width: 700px;
        color: #fff;
        position: relative;
      }
  
  
      .modal-content h3 {
        margin-bottom: 0.5rem;
      }






      /* Card Styles */
      .friend-item {
        overflow: hidden;
        flex: 1 1 calc(25% - 1rem);
        max-width: calc(25% - 1rem);
        transition: transform 0.3s ease;
        display: flex;
        flex-direction: column;
        cursor: pointer;
      }
      .friend-item:hover {
        transform: scale(1.02);
      }
  
      /* Figure & Overlay */
      .friend-item figure {
        position: relative;
        overflow: hidden;
        margin: 0;
      }
      .friend-item img {
        display: block;
        width: 100%;
        height: auto;
      }

      .friend-item:hover .overlay {
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.6);
      }

            /* Info Section */
      .friend-info {
        flex: 1;
        display: flex;
        flex-direction: column;
      }

      .friend-info h2 {
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
        margin-top: 0.85rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .friend-info p {
        font-size: 0.9rem;
        color: #aaa;
        margin-bottom: 0.5rem;
      }

            /* Mobile: single column */
      @media (max-width: 600px) {
        .friend-item {
          flex: 1 1 100%;
          max-width: 100%;
        }
        .friend-info {
          padding-left: 1rem;
        }
        .friend-grid {
          gap: 2rem;
        }
      }