@media screen and (max-width: 400px) {
  .container {
    width: 100%;
  }
  .logo {
    display: none;
  }
  .logo-big {
    display: block;
    max-height: 200px;
  }
  .whoami {
    width: 100%;
    text-align: center;
    order: 2;
    float: right;
  }
  .gallery {
    flex-direction: column;
  }
  .photo {
    width: 100%;
    margin: auto;
  }
}

@media screen and (min-width: 401px) {
  .gallery {
    display: flex;
    flex-wrap: wrap;
  }
  .photo {
    width: 100%;
    object-fit: cover;
    margin: auto;
  }
  .hero {
    width: 100%;
  }
}

@media screen and (min-width: 850px) {
  .container {
    width: 850px;
    text-align: center;
    margin: auto;
  }
  .gallery {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
  }
  .photo {
    width: 100%;
    object-fit: cover;
    margin: auto;
  }
  .photo-box {
    width: 25%;
  }
}