.container__gray,
.container__grayFinished {
  margin: 0;
  box-sizing: border-box; /* reset */
  overflow: hidden;
  width: 100%; /* restrict the page width to viewport */

  background: linear-gradient(90deg, #252525 0%, #121212 100%);
  height: 100vh;
  color: #fffd;
  font-weight: 300;
  display: grid;
  grid-template-columns: 20vw 20vw 18vw 3vw 1fr;
  grid-template-rows: 60vh 1fr 1fr 1fr;
  grid-template-areas:
    ' pip  pip  pip  . schd'
    ' titl titl titl . schd'
    ' info info clck . schd'
    ' info info time . schd';
  gap: 1vw;
  padding: 1vw;
}

.label {
  font-size: 1.3vw;
  color: #ff7597;
}

.eventTitle {
  grid-area: titl;
  font-size: 3vw;
  font-weight: 600;
  text-decoration: underline #ff7597 0.5vh;
  padding-top: 0.2vh;
  padding-left: 1vw;
}

.pip {
  grid-area: pip;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 2555, 0.07);
  width: 100%;
  text-align: center;
  display: grid;
  place-content: center;
}

.empty {
  opacity: 0.5;
}

.piptext {
  color: rgba(255, 255, 255, 0.13);
  font-weight: 600;
  font-size: 4vh;
}


/* =================== TITLES ===================*/

.infoContainer > div {
  overflow: hidden;
}

.infoContainer,
.clockContainer,
.countdownContainer {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 1vh 1vw;
}

.todayContainer {
  background-color: rgba(255, 255, 255, 0.07);
  padding: 2.5vh 2vw;
}

.infoContainer,
.todayContainer {
  border-radius: 1vw;
}

.infoContainer {
  grid-area: info;
  display: grid;

  grid-template-rows: 3vh minmax(0, 1fr);
  grid-template-columns: 3fr 1fr;
  grid-template-areas:
    'titl qr'
    'binf qr';
  gap: 0.5vw;
}

.infoMessages {
  grid-area: binf;
  font-size: 1.5vw;
  line-height: 2vw;
  white-space: pre-line;
}

.qr {
  align-self: center;
  justify-self: center;
  grid-area: qr;
}

/* =================== SCHEDULE ===================*/

.todayContainer {
  grid-area: schd;
  display: grid;
  grid-template-rows: 5vh 1fr 3vh;
  height: 100%;
}

/* =================== MAIN ===================*/

.clockContainer {
  grid-area: time;
  border-radius: 0 0 1vw 1vw;
}

.countdownContainer {
  grid-area: clck;
  border-radius: 1vw 1vw 0 0;
}

.clock {
  font-family: 'Open Sans', sans-serif;
  font-size: 3vw;
  line-height: 3vw;
  text-align: center;
  letter-spacing: 0.25vw;
  color: #ddd;
}