.container {
  width: 100%;

  padding: 15px;
  margin: 0 auto;

  /* border: 1px dotted red; */
}

.h-10 {
  min-height: 10vh;
  min-height: 10svh;
  min-height: calc(var(--vh, 1vh) * 10);
}

.h-25 {
  min-height: 25vh;
  min-height: 25svh;
  min-height: calc(var(--vh, 1vh) * 25);
}

.h-50 {
  min-height: 50vh;
  min-height: 50svh;
  min-height: calc(var(--vh, 1vh) * 50);
}

.h-75 {
  min-height: 75vh;
  min-height: 75svh;
  min-height: calc(var(--vh, 1vh) * 75);
}

.h-100 {
  min-height: 100vh;
  min-height: 100svh;
  min-height: calc(var(--vh, 1vh) * 100);
}

/* Small devices (phones, 576px and up) */
@media screen and (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

/* XXL */
@media screen and (min-width: 1400px) {
  .container {
    /* wtf: this is all of solution. */
    min-height: 800px;
  }
}