* { margin: 0; padding: 0; }
html, body, .display-1 { height: 100%; display: flex; flex-direction: column; }
.display-1 .main-1 { flex: 1; }
.display-1 .main-2 .footer .web-info {
   display: grid;
   grid-template-areas:
   "header"
   "content"
   "footer";
}
.display-1 .main-1 .header { grid-area: header; }
.display-1 .main-1 .content { grid-area: content; }
.display-1 .main-2 .footer { grid-area: footer; }
.display-1 .main-1 .header {
   padding: 1.5%;
   border: 1px solid;
}
.display-1 .main-1 .header .isN, .isD { font-size: 90%; }
.display-1 .main-1 .content {
   padding: 1.5%;
   border: 1px solid;
}
.display-1 .main-2 .footer {
   padding: 1.5%;
   border: 1px solid;
}
.display-1 .main-2 .footer .web-info {
   display: grid;
   grid-template-areas:
   "info-1"
   "info-2"
   "info-3";
}
.display-1 .main-2 .footer .web-info .info-1 { grid-area: info-1; }
.display-1 .main-2 .footer .web-info .info-2 { grid-area: info-2; }
.display-1 .main-2 .footer .web-info .info-3 { grid-area: info-3; }
.display-1 .main-2 .footer .web-info .info-1, .info-2, .info-3 { padding: 2%; border: 1px solid; }
.display-1 .main-2 .footer .web-info .info-1 .info-value { font-size: 70%; }
.display-1 .main-2 .footer .web-info .info-2 .info-value { font-size: 70%; }
.display-1 .main-2 .footer .web-info .info-3 .info-value { font-size: 70%; }
@media screen and (min-width: 400px) {
   .display-1 .main-1 .header {
      padding: 1.5%;
      border: 1px solid;
   }
   .display-1 .main-1 .header .isN, .isD { font-size: 90%; }
   .display-1 .main-2 .footer .web-info {
      display: grid;
      grid-template-areas:
      "info-1 info-2"
      "info-3 info-3";
   }
   .display-1 .main-2 .footer .web-info .info-1 .info-value { font-size: 80%; }
   .display-1 .main-2 .footer .web-info .info-2 .info-value { font-size: 80%; }
   .display-1 .main-2 .footer .web-info .info-3 .info-value { font-size: 80%; }
}
@media screen and (min-width: 800px) {
   .display-1 .main-1 .header {
      padding: 1.5%;
      border: 1px solid;
   }
   .display-1 .main-1 .header .isN, .isD { font-size: 90%; }
   .display-1 .main-2 .footer .web-info {
      display: grid;
      grid-template-areas:
      "info-1 info-2 info-3";
   }
}