/* Albums grid: 2 columns with responsive fallback */
    /* Albums grid: 3 columns with responsive fallback */
    #gallery-container {
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
    }

    #gallery-container .album-card {
      /* Calculation for 3 columns: (100% / 3) - (2/3 * gap) */
      /* Here we use calc(33.333% - 12px) for simpler math to account for the 18px gap */
      width: calc(33.333% - 12px);
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
      border-radius: 6px;
    }

    /* Responsive fallback: Change back to 1 column on smaller screens */
    @media (max-width: 1050px) {

      /* Adjusted breakpoint for better 3-column viewing */
      #gallery-container .album-card {
        width: calc(50% - 9px);
        /* 2 columns on medium screens */
      }
    }

    @media (max-width: 650px) {
      #gallery-container .album-card {
        width: 100%;
        /* 1 column on small screens */
      }
    }

    /* Rectangle aspect (3:2) */
    .album-card .crop {
      width: 100%;
      height: 0;
      padding-bottom: 66.666%;
      position: relative;
      overflow: hidden;
    }

    .album-card img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .35s ease, filter .25s ease;
      display: block;
    }

    /* Bottom translucent title bar (collapsible gradient) */
    .album-info {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 28%;
      /* start small */
      padding: 16px 18px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.85) 100%);
      color: #fff;
      font-weight: 700;
      font-size: 1.15rem;
      transition: height .35s ease, background .35s ease, padding .25s ease;
      box-sizing: border-box;
    }

    .album-info .title {
      opacity: 1;
      font-size: 5rem;
      line-height: 1.05;
    }

    /* Hover behaviors: gradient grows from bottom upwards */
    .album-card:hover img {
      transform: scale(1.04);
      filter: brightness(1.07) saturate(1.04);
    }

    /* When hovered, expand the gradient to cover the whole card */
    .album-card:hover .album-info {
      height: 100%;
      padding: 28px 18px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.95) 100%);
    }

    .album-info .overlay-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      /* Center alignment + start slightly smaller (0.7) */
      transform: translate(-50%, -50%) scale(0.7);

      opacity: 0;
      transition: opacity .2s ease, transform .18s ease;
      pointer-events: none;
      /* Allows clicks to pass through to the link */

      /* Ensures the span inside is centered */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* 2. The Icon Itself: Controls size and weight */
    .album-info .overlay-icon .material-symbols-outlined {
      font-size: 48px;
      /* Set your desired icon size here */
      color: #fff;
      font-weight: normal;
      /* Ensures it isn't bold */
      user-select: none;
      /* Prevents highlighting the icon text */
    }

    /* 3. Hover State: Reveals the icon and scales it to normal size */
    .album-card:hover .album-info .overlay-icon {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    .album-link {
      color: inherit;
      display: block;
    }