$background-color: #f8f8f8;

html {
  font-size: 62.5%;
}

body {
  font-family: sans-serif;
  font-size: 1.6rem;
  text-align: center;
  background-color: $background-color;
}

.game {
  margin-bottom: 1em;
}

.teamPanel {
  display: inline-block;
  width: 45%;

  &.away {
    text-align: right;

    .teamScore {
      margin-left: 0.5em;
    }
  }

  &.home {
    text-align: left;

    .teamScore {
      margin-right: 0.5em;
    }
  }
}

.teamScore {
  font-size: larger;
  font-weight: bold;
}

.delimiter {
  display: inline-block;
  width: 2em;
  height: 1em;
  position: relative;

  .period {
    font-size: 1.1rem;
    position: absolute;
    top: 0.4em;
    left: 0.8em;
  }
}

$background-color: #f8f8f8;

html {
  font-size: 62.5%;
}

body {
  font-family: sans-serif;
  font-size: 1.6rem;
  text-align: center;
  background-color: $background-color;
}

.game {
  margin-bottom: 1em;
}

.teamPanel {
  display: inline-block;
  width: 30%;

  &.away {
    text-align: right;

    .teamScore {
      margin-left: 0.5em;
    }
  }

  &.home {
    text-align: left;

    .teamScore {
      margin-right: 0.5em;
    }
  }
}

.teamScore {
  font-size: larger;
  font-weight: bold;
}

.delimiter {
  display: inline-block;
  width: 2em;
  height: 1em;
  position: relative;

  .period {
    font-size: 1.1rem;
    position: absolute;
    top: 0.4em;
    left: 0.8em;
  }
}

Make game scores fit on one row on small screens
Make game scores fit on one row on small screens
