*{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    :root{
      --bg:#0a0a0a;
      --card:#141414;
      --border:rgba(255,255,255,0.08);
      --text:#ffffff;
      --muted:rgba(255,255,255,0.6);
      --transition:cubic-bezier(.77,0,.18,1);
    }

    body{
      background:var(--bg);
      color:var(--text);
      font-family:Inter,sans-serif;
      overflow-x:hidden;
    }

    a{
      text-decoration:none;
      color:inherit;
    }

    /* NAV */

    .top-nav{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:60px;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:100;
      backdrop-filter:blur(20px);
      background:rgba(10,10,10,0.75);
      border-bottom:1px solid var(--border);
    }

    .logo{
      font-size:14px;
      letter-spacing:8px;
      text-transform:uppercase;
      font-weight:600;
    }

    /* PAGE */

    .page{
      width:100%;
      padding:160px 8vw 120px;
    }

    .hero{
      margin-bottom:100px;
    }

    .hero p{
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:3px;
      margin-bottom:20px;
      font-size:13px;
    }

    .hero h1{
      font-size:clamp(60px,10vw,160px);
      line-height:0.9;
      letter-spacing:-6px;
      text-transform:uppercase;
    }

    /* GRID */

    .grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:24px;
    }

    .card{
      height:500px;
      border-radius:28px;
      background:#151515;
      border:1px solid var(--border);
      padding:30px;
      display:flex;
      align-items:flex-end;
      position:relative;
      overflow:hidden;
    }

    .card.large{
      grid-column:span 2;
      height:700px;
    }

    .card h2{
      font-size:32px;
      text-transform:uppercase;
      letter-spacing:-1px;
    }

    /* BACK BUTTON */

    .back-btn{
      position:fixed;
      right:30px;
      top:110px;
      z-index:120;
      padding:12px 18px;
      border-radius:999px;
      background:white;
      color:black;
      font-size:13px;
      text-transform:uppercase;
      letter-spacing:2px;
      border:none;
      cursor:pointer;
    }

    /* TRANSITION */

    .transition-overlay{
      position:fixed;
      inset:0;
      background:white;
      transform:scaleY(0);
      transform-origin:top;
      z-index:999;
      pointer-events:none;
    }

    .transition-overlay.active{
      animation:pageTransition 1s var(--transition) forwards;
    }

    @keyframes pageTransition{

      0%{
        transform:scaleY(0);
        transform-origin:top;
      }

      50%{
        transform:scaleY(1);
        transform-origin:top;
      }

      51%{
        transform-origin:bottom;
      }

      100%{
        transform:scaleY(0);
        transform-origin:bottom;
      }

    }

    @media(max-width:900px){

      .grid{
        grid-template-columns:1fr;
      }

      .card.large{
        grid-column:span 1;
      }

    }
.card {
    height: auto;
    border-radius: 0;
    background: #151515;
    border: none;
    padding: 0;
    display: flex;
    align-items: flex-end;
    position: relative;
    overflow: hidden;
}

    .card img{
  width: 100%;
}