/* ===============================
   BOARD
================================ */
.board{
    width:92vw;
    max-width:420px;
    background:#1b1b1b;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.6);
}

/* ===============================
   HEADER + ROW
================================ */
.header, .row{
    display:grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    align-items:center;
    padding:12px 14px;
    font-size:14px;
    line-height:1.2;
}

.header{
    background:#222;
    font-weight:bold;
    font-size:13px;
    letter-spacing:.5px;
}

.row{
    border-top:1px solid #2c2c2c;
    animation:fadeIn .6s ease;
}

/* ===============================
   TEXT
================================ */
.amount{
    color:#2dff7a;
    font-weight:bold;
    text-align:right;
}

.row span:last-child{
    text-align:right;
}

/* ===============================
   ANIMATION
================================ */
.fade-out{
    animation:fadeOut .6s ease forwards;
}

@keyframes fadeIn{
    from{opacity:0; transform:translateY(-6px);}
    to{opacity:1; transform:translateY(0);}
}

@keyframes fadeOut{
    from{opacity:1;}
    to{opacity:0; height:0; padding-top:0; padding-bottom:0;}
}

/* ===============================
   MOBILE (<= 480px)
================================ */
@media (max-width:480px){
    .board{
        max-width:100%;
        border-radius:0;
    }

    .header, .row{
        padding:10px 10px;
        font-size:12px;
    }

    .header{
        font-size:11px;
    }
}

/* ===============================
   TABLET (481px - 900px)
================================ */
@media (min-width:481px) and (max-width:900px){
    .board{
        max-width:520px;
    }

    .header, .row{
        font-size:14px;
        padding:12px 16px;
    }
}