:root {
  /* Fortinbras
  color: #E5E5E5;
  background: #001C49; */
  /* --fortinbras-main: #e5e5e5; */
  --fortinbras-main: white;
  --fortinbras-back: #001c49;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

@font-face {
  font-family: "Financier Text";
  src: url("../font/FinancierText-RegularItalic.woff2") format("woff2"),
    url("../font/FinancierText-RegularItalic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Financier Text";
  src: url("../font/FinancierText-Regular.woff2") format("woff2"),
    url("../font/FinancierText-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  background-color:  var(--fortinbras-main);
  color: var(--fortinbras-back);
  margin: 0;
  padding: 0;

  font-family: "Financier Text";
  font-style: normal;
  font-weight: normal;
  /* font-size: 32px;
  line-height: 89.5%; */
  font-size: 24px;
  line-height: 97.5%;
  /* or 27px */
}

img {
  max-height: 100%;
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  font-style: normal;
  font-weight: normal;
  color: var(--fortinbras-back);
}

a:hover {
  font-style: italic;
  font-weight: normal;
}

p {
  margin: 0;
}

header{
  /* background-image: url("/src/blue_fortinbras.svg"); */
  /* height: 90px; */
  /* width: 100%; */
  /* padding-right: 52px; */

  background-image: url("../src/logo.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left;
  height: 80px;
  width: min(376px, 75vw);
  /* max-width: ; */
  padding: 29px;
  grid-area: a;
  margin-left: 13px;
}



.content {
  display: grid;
  min-height: 100vh;
  grid-template-columns: auto 533px 1fr;
  grid-template-rows: auto 1fr;
  grid-column-gap: 34px;
  grid-template-areas:
    "a b c"
    "d d d";
}

aside {
  overflow: hidden;
  grid-area: d;
}

aside video {
  object-fit: cover;
  object-position: center top;
  width: 100%;
  height: 100%;
}

main {
  padding: 35px 0px 31px 43px;
  grid-area: b;
}

.meta{
  padding: 35px 0px 31px 30px;
  grid-area: c;
}

.meta p:first-of-type {
  padding-bottom: 0;
}

/* Maximum aspect ratio */
/* @media (max-aspect-ratio: 1/1) { */
@media (max-width: 1020px) {
  .video {
    background: rgb(155, 153, 255);
  }
  .content {
    min-height: 100vh;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "a a a"
      "b b b"
      "d d d"
      "c c c";
  }

  main{
    padding: 0px 18px 31px 18px;
  }

  main p{
    max-width: 594px;
  }

  .meta{
    padding: 18px 18px 18px 18px;
  }
}

/* Minimum aspect ratio */
/* @media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 7/4) { */
@media (max-width: 1350px) and (min-width: 1020px) {
  .video {
    background: rgb(153, 255, 167);
  }
  .content {
    min-height: 100vh;
    grid-template-columns: auto 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "a b b"
      "d d d"
      "c c c";
  }
  main{
    max-width: 490px;
    padding: 35px 77px 31px 43px;
  }
}