.grid-container {
  display: grid;
  grid-template-columns: 18% 41% 41%;
  grid-template-rows: auto auto auto;
  gap: 20px 10px;
  grid-template-areas:
    "face person emp"
    "change change text"
    ". . .";
}

.face { grid-area: face; }

.person { grid-area: person; }

.emp { grid-area: emp; }

.change { grid-area: change; }

.text { grid-area: text; }


.btn-flat-border {
    display: inline-block;
    padding: 0.3em 1em;
    text-decoration: none;
    color: #2d4f78;
    border: solid 2px #2d4f78;
    border-radius: 3px;
    transition: .4s;
    margin: 5px 0 5px 0;
    width: 80%;/* 100% */
    text-align: center;
}

.btn-flat-border:hover {
  background: #bfbfbf;
  color: white;
}

.btn-flat-horizontal-border {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.5em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #ff7f7f;
  transition: .4s;
  width: 80%;
  text-align: center;
  border-radius: 3px;
}

.btn-flat-horizontal-border > span {
  border-bottom: solid 2px #FFF;
  border-top: solid 2px #FFF;
}

.btn-flat-horizontal-border:hover span {
  padding: 0.1em 0;
}