#why-us {
  height: 600px;
  display: -ms-grid;
  display: grid;
  width: 100%;
  text-align: center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-bottom: 40px;
}

#why-reasons {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr 10px 1fr 10px 1fr 10px 1fr;
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
  justify-items: center;
}

.why-reason {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: whitesmoke;
  height: 200px;
  width: 80%;
  border-radius: 5px;
  -webkit-box-shadow: var(--box-shadow-1);
          box-shadow: var(--box-shadow-1);
  text-align: justify;
  padding: 0 10px 0 10px;
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  #why-reasons {    
      -ms-grid-columns: 1fr 1fr;    
      grid-template-columns: 1fr 1fr;
      -ms-grid-rows: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
  }
  #why-reasons > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  #why-reasons > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
  #why-reasons > *:nth-child(3) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
  #why-reasons > *:nth-child(4) {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }

  .why-reason.left {
      -ms-grid-column-align: left;
          justify-self: left;
  }

  .why-reason.right {
      -ms-grid-column-align: right;
          justify-self: right;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 


  .why-reason {
        width: 400px;
  }
}