.Grid {
  margin-bottom: 20px;

  > .header {
    margin: 1rem 0;

    display: grid;
    grid-auto-flow: column;
    justify-content: start;
    justify-items: start;
    grid-gap: 1rem;

    h1 {
      margin: 0
    }

    .pick-burn-detail, .confirm-btn {
    }

    .pick-burn-detail {
      font-size: 1rem;
      // font-weight: bold;

      max-width:  20vw; // this 

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

      .picks { padding-right: 6px; }
      .burns { }
    }

    button.confirm-btn {
      justify-self: start;
      align-self: end;

      font-size: 18px;
      color: #fff;
      background: #3a87e5;
      padding: 4px 10px;

      border: #3a87e5 solid 1px;
      border-radius: 2px;
      margin-bottom: 3px;
    }
    button[disabled].confirm-btn {
      color: #777;
      background: white;
      border: #777 solid 1px;
      border-radius: 2px;
    }
  }
  
  > .cards {
    display: grid;
    grid-template-rows: repeat(auto-fill, var(--card-height));
    grid-template-columns: repeat(auto-fill, var(--card-width));
    grid-gap: 2px;

    position: relative;

    .waiting {
      position: absolute;
      top: 0;
      left: 22px;

      color: white;
      padding: 0 5px;
      background: #a8a4a4;
    }
  }
}

@media screen and (max-width: 480px) {
  .Grid {
    --card-width: calc(100vw / 2 - 5px);
    --card-height: calc(calc(100vw / 2 - 5px) * 17 / 12);
  }
}

