@media (max-width: 400px) {
  .head-image {
      background-image: url(../image/married-mobile.jpg);
  }
}

@media (min-width: 400px) {
  .head-image {
      background-image: url(../image/married-portrait.jpg);
  }
}

@media (min-aspect-ratio: 2/3) {
  .head-image {
      background-image: url(../image/married-carre-2000.jpg);
  }
}

@media (min-aspect-ratio: 3/2) {
  .head-image {
      background-image: url(../image/married.jpg);
  }
}

header {
  height: 100vh;
  box-shadow: 10px 10px 12px #555;
}

.head-image {
  height: 100%;
  background-size: cover;
}