.image-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
max-width: 1200px;
margin: auto;
}

.tilt-card {
aspect-ratio: 1 / 1;
position: relative;
border-radius: 10px;
overflow: hidden;

transform-style: preserve-3d;
transition: transform 0.15s ease;

box-shadow: 0 10px 30px rgba(0,0,0,0.35);

background: #000;
}

.tilt-notcard { /* i am a fucking genius */
position: relative;
border-radius: 10px;
overflow: hidden;
transform-style: preserve-3d;
transition: transform 0.15s ease;
box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.tilt-gamecard { /* i gotta stop doing this */
width: 220px;
height: auto;
position: relative;
border-radius: 10px;
overflow: hidden;
transform-style: preserve-3d;
transition: transform 0.15s ease;
box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.tilt-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.tilt-card::before {
content: "";
position: absolute;
inset: 6px;
border-radius: 8px;
pointer-events: none;
z-index: 2;

background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.28),
    rgba(255,255,255,0) 55%
);
}

.glow {
position: absolute;
width: 260px;
height: 260px;
border-radius: 50%;
pointer-events: none;

background: radial-gradient(
    circle,
    rgba(255,255,255,0.35),
    rgba(255,255,255,0.12),
    transparent 70%
);

transform: translate(-50%, -50%);
opacity: 0;
mix-blend-mode: screen;
}

.tilt-card:hover .glow {
opacity: 1;
}

.tilt-notcard:hover .glow {
opacity: 1;
}

.tilt-gamecard:hover .glow {
opacity: 1;
transform: scale(1.01);
}

.tilt-gamecard::before {
content: "";
position: absolute;
inset: 6px;
border-radius: 8px;
pointer-events: none;
z-index: 2;

background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.28),
    rgba(255,255,255,0) 55%
);
}

.tilt-card:hover {
transform: scale(1.05);
cursor: crosshair;
}


/* ══════════════════ Interests ══════════════════ */

    .cards-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .interest-card {
      width: 880px;
      height: 131px;

      position: relative;
      border-radius: 12px;
      overflow: hidden;

      transform-style: preserve-3d;
      transition: transform 0.2s ease;

      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

      color: white;

      display: flex;
      align-items: flex-end;

      padding: 20px;

      cursor: crosshair;
    }

    .interest-card:hover {
      transform: scale(1.01);
    }

    /* Dark overlay for readability */
    .interest-card::before {
        content: "";
        position: absolute;
        inset: 6px;
        border-radius: 8px;
        pointer-events: none;
        z-index: 2;

        background: linear-gradient(
            to bottom,
            rgba(255,255,255,0.28),
            rgba(255,255,255,0) 55%
        );
    }

    .interest-content {
      position: relative;
      z-index: 2;
    }

    .interest-title {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .interest-description {
      font-size: 14px;
      line-height: 1.4;
      opacity: 0.92;
      max-width: 650px;
    }

    .friends {
      background-image: url("../../../assets/img/pages/interests/friends.png");
    }

    .music {
      background-image: url("../../../assets/img/pages/interests/music.png");
    }

    .games {
      background-image: url("../../../assets/img/pages/interests/games.png");
    }