@charset "utf-8";

:root {
  --width: 1200px;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #111;
}

img {
  vertical-align: bottom;
}

/* helper */

.h-container {
  max-width: var(--width);
  box-sizing: border-box;
}

.h-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.h-grid {
  display: grid;
}

.h-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.h-grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

.h-gap-s {
  gap: 1rem;
}

.h-gap-m {
  gap: 2rem;
}

.h-gap-l {
  gap: 3rem;
}

.h-img-resp {
  max-width: 100%;
  height: auto;
}

/* component  */

.figure-info {
  margin-top: .5rem;
  font-weight: 600;
  text-align: center;
  color: #999;
}