html,
body,
.grid-container {
  height: 100vh;
  margin: 0;
  padding: 0;
}

.grid-container {
  /* background: url('https://extranet.atemis.eu/images/bg_atemis.jpg') no-repeat; */
  background-size: cover;
  background-color: #181716;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 2.5fr 1fr;
  grid-template-areas: "logo logo logo logo logo" "btn1 btn2 btn3 btn4 btn5";
}

.g-logo {
  grid-area: logo;
  background: url(https://extranet.atemis.eu/images/logo_atemis.svg) center
    center no-repeat;
  background-color: #f5f5f5;
  background-size: auto 25%;
  box-shadow: 0 0 15px #00000014;
}

.g-btn1 {
  grid-area: btn1;
}

.g-btn2 {
  grid-area: btn2;
}

.g-btn3 {
  grid-area: btn3;
}

.g-btn4 {
  grid-area: btn4;
}

.g-btn5 {
  grid-area: btn5;
}

.btn {
  display: flex;
  font-size: 35px;
  font-family: 'Helvetica', Arial;
  text-decoration: none;
  color: #f5f5f5;
  background: rgba(0, 0, 0, 0);
  transition: 0.5s;
}

/* .btn:nth-of-type(2n-1) { */
.btn {
  border-right:#ffffff2e 1px solid;
}

.btn:nth-of-type(2n + 1) {
  border-bottom:#ffffff2e 1px solid;
}

.btn:nth-of-type(2n + 2) {
  border-bottom:#ffffff2e 1px solid;
}

.btn:hover {
  /* background-color: rgba(255, 255, 255, 0.5); */
  background-color: #007474 !important;
}

.btn > p {
  margin: auto;
  text-align: center;
}

@media (max-width: 700px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1.5fr 1fr 1fr 1fr 1fr
    grid-template-areas: "logo" "btn1" "btn2" "btn3" "btn4";
  }

  .g-logo {
    background-size: 80% auto;
  }

  .btn {
    font-size: 20px;
  }
}

@media (max-width: 375px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "logo" "btn1" "btn2" "btn3" "btn4";
  }
}