@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

html,
body {
    margin: 0;
    background-color: rgb(54, 54, 54);
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
}

.container {
    display: flex;
}

.row, .header {
    display: flex;
}

.label{
    flex: 1;
    border: 3px solid rgb(213, 213, 213);
    text-align: center;
    padding: 2px;
    color: rgb(213, 213, 213);
    flex-flow: row nowrap;
    align-items: center;
    background-color: rgb(18, 103, 139);
}

.number{
    flex: 0.15;
    display: flex;
    justify-content: center;
}

.cell {
    flex: 1;
    border: 3px solid rgb(213, 213, 213);
    text-align: center;
    padding: 2px;
    color: rgb(213, 213, 213);
    flex-flow: row nowrap;
    align-items: center;
    display: flex;
    justify-content: center;
}

img {
    object-fit: scale-down;
     width: calc(.3 * 100vh);
    height: calc(.2 * 100vh);
    object-fit: cover;

  /*max-width: 100%; !* Maximum width of the parent container *!*/
  /*max-height: 100%; !* Maximum height of the parent container *!*/
  object-fit: contain; /* Ensures that the aspect ratio of the image is maintained */
  }