* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  width: 100%;
}
body {
  font-size: clamp(1rem,5vw,4rem);
  text-align: center;
}
.first {
  background-color: #195774;
  color: #fff;
}
header {
  padding: 2% 0 3%;
}
/* section part */
.all-sections {
  width: 80%;
  margin: 0 auto;
}
.miss {
  display: none;
}
.puppy-1 {
  margin-bottom: 5vw;
}
.three-box {
  margin: 5% 0 4%;
}
.two-puppies {
  margin: 5% 0 4%;
}
.puppy-4 {
  margin-top: 4vw;
}
footer {
  padding: 4vw 0;
}
/*  media quarie */
@media (min-width: 768px) {
  .puppy-1,
  .puppy-4 {
    margin: 0;
  }
  .miss {
    display: block;
    background-color: rgb(239, 76, 100);
    padding: 5%;
  }
  .three-box {
    display: flex;
    justify-content: space-between;
  }
  .puppy-1,
  .puppy-2,
  .miss {
    width: 32%;
  }
  .all-sections img {display: block;
    /* height: 100%; */
  }
  .two-puppies {
    display: flex;
    justify-content: space-between;
  }
  .puppy-3,
  .puppy-4 {
    width: 47%;
  }
}