@font-face {
    font-family: 'fira-sans-book';
     /* elder syntax which always loads the font via the network */
    src: url('/fonts/FiraSans-Book-latin.woff2') format('woff2');
    /* newer format that allows to use the local file without loading */
    src: local (Fira Sans Book),
         url('/fonts/FiraSans-Book-latin.woff2') format('woff2');
}

body {
  font-size: x-large;
  font-family: "Fira Sans Book", fira-sans-book, ui-sans-serif, sans-serif;
  line-height: 1.3;

  margin: 0;
  padding: 0rem;
}

header {
  display:flex;
  align-items:center;
  background:white;
  picture {
      padding:.5em;
  }
}

footer {
    font-size: small;
    text-align: right;
    padding: 1em;
}

h1 {
  background: #1a3b66;
  color: white;
  padding:.2em;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  padding: 2rem;
}

.container img,
.container video {
  width: 100%;
  height: auto;
}

.text-block {

  background: #ffffff;
  gap: 2rem;
  padding: 4rem;
  border-radius: 8px;
}

@media (60em < width <= 100em) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (width < 60em) {
  .container {
    grid-template-columns: 1fr;
  }
}