:root {
  --clr-primary: hsl(26, 80%, 52%);
  --clr-secondary: hsl(0, 0%, 13%);
  --clr-bg: hsl(0, 0%, 18%);
  --clr-bg2: hsl(0, 0%, 25%);
  --clr-p: hsl(0, 0%, 78%);

  --ff-default: "Lora", Times, serif;
  --ff-sans: system-ui, sans-serif;

  --fw-light: 400;
  --fw-regular: 500;
  --fw-bold: 700;

  --fs-p: 1.25rem;
  --fs-s: 1rem;
  --fs-branding: 3rem;
  --fs-branding-large: 3.5rem;
}

@font-face {
  font-family: "SSP";
  font-weight: 300;
  src: url("fonts/SourceSerifPro-Light.woff2") format("woff2"),
    url("fonts/SourceSerifPro-Light.woff") format("woff");
}

@font-face {
  font-family: "SSP";
  font-weight: 400;
  src: url("fonts/SourceSerifPro-Regular.woff2") format("woff2"),
    url("fonts/SourceSerifPro-Regular.woff") format("woff");
}

@font-face {
  font-family: "SSP";
  font-weight: 700;
  src: url("fonts/SourceSerifPro-SemiBold.woff2") format("woff2"),
    url("fonts/SourceSerifPro-SemiBold.woff") format("woff");
}

/* lora-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/lora-v35-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lora-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/lora-v35-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lora-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/lora-v35-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lora-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/lora-v35-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lora-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/lora-v35-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lora-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/lora-v35-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lora-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/lora-v35-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lora-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/lora-v35-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
}

body {
  padding: 0 1rem 1rem 1em;
  background-image: linear-gradient(180deg, var(--clr-bg), var(--clr-bg2));
  color: var(--clr-p);
  font: var(--fw-regular) var(--fs-p) var(--ff-default);
  min-height: 100vh;
}

a,
a:hover,
a:active {
  color: var(--clr-primary);
}

a {
  text-decoration: none;
}

a:hover,
a:active {
  text-decoration: underline;
}

.active a {
  font-weight: var(--fw-bold);
}

h1 {
  /* width: 100%; */
  border-bottom: 2px solid var(--clr-secondary);
  letter-spacing: 0.2rem;
}

p {
  line-height: 1.5;
}

#container {
  max-width: 56rem;
  margin: auto;
}

#branding {
  /* width: 100%; */
  cursor: pointer;
  padding-block: 3rem;
}

#branding img {
  display: block;
  max-width: 100%;
  height:150px;
  margin: auto;
}

nav[role="menu"] {
  font-family: var(--ff-sans);
}

nav[role="menu"] > ul {
  display: grid;
  gap: 0.2rem;
  padding: 0;
}

nav[role="menu"] li {
  list-style-type: none;
}

nav[role="menu"] a {
  display: block;
  background-color: var(--clr-secondary);
  padding: 0.2rem 0.2rem;
  text-align: center;
}

footer {
  clear: both;
}

footer > p {
  text-align: center;
}

img.aside {
  width: 100%;
  margin-block: 1em;
}

.fotos-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.foto-card {
  /* grid-row: span 3; */
  display: grid;
  grid-auto-rows: min-content;
  gap: 0.5rem;
  grid-template-areas: "foto" "caption" "description";
  background-color: var(--clr-secondary);
  padding: 1rem;
  background-image: linear-gradient(black, var(--clr-secondary));
}

.fotos .foto {
  display: block;
  grid-area: foto;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.fotos .caption {
  grid-area: caption;
  margin: 0;
}

.fotos .description {
  grid-area: description;
}

#history {
  padding: 0 1rem;
}

#history th {
  padding-right: 1rem;
  vertical-align: top;
}

@media (min-width: 32rem) {
  nav[role="menu"] > ul {
    grid-auto-flow: column;
    gap: 0.5rem;
  }
  footer {
    grid-auto-flow: column;
    gap: 0.5rem;
  }
  footer .divider {
    display: none;
  }
  img.aside {
    max-width: 33%;
    float: right;
    margin: 0 0 1em 1em;
  }
}