html {
  font-size: 17px;
  color: rgb(0, 0, 0);
  font-family: 'Heebo', sans-serif;
  /* font-family: "Source Sans Pro", sans-serif; */
  background-color: #ffffff;
}
.front-side {
  width: 1042px;
  height: 1600px;
  display: grid;
  grid-template-columns: 2% 20% 28% 48% 2%;
  grid-template-rows: 4% 24% 23% 6% 39% 4%;
  position: relative;

  overflow: hidden;
  background-color: #77b103;
}
.text-data {
  grid-column: 4 ;
  grid-row: 5;
  text-align: left;
}
.fspp {
  grid-column: 3 ;
  grid-row: 2 ;
  text-align: center;
}

.photo {
  grid-column: 3 / span 2 ;
  grid-row: 3;
  text-align: center;

  object-fit: cover;
    object-position: 25% 25%; 
    background-position: center center;
    background-repeat: no-repeat;


    border: 3px solid #ccc;
    background: #eee;
    margin: auto;
    padding: 15px 10px;
}
.crop {
  object-fit: cover;
  object-position: 25% 25%; 
  background-position: center center;
  background-repeat: no-repeat;
}
.no-anggota p {
  font-size:57;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
}
.info p {
  font-size:25;
}
.since p {
  font-size:30;
}