main.css

/* @font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url("assets/Inter-roman.var.woff2?v=3.13") format("woff2");
} */

@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  font-named-instance: "Regular";
  src: url("./assets/Inter-roman.var.woff2") format("woff2 supports variations"),
    url("./assets/Inter-roman.var.woff2") format("woff2-variations");
}

:root {
  --page-background-color: #f9e9bf;
  --bhaus-Red: #da4720;
  --bhaus-Red--dark: #cc4d31;
  --bhaus-Brwn: #a97b4a;
  --Inter-wght: 100;
  font-size: 16px;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  font-variation-settings: "wght" var(--Inter-wght);
}

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

html {
  background-color: var(--page-background-color);
  scrollbar-width: thin;
  scrollbar-color: var(--bhaus-Red) var(--page-background-color);
  height: 100%;
}

/* Set core body defaults */
body {
  font-family: "Inter", "Segoe UI", Arial, Helvetica, sans-serif;
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
  text-transform: uppercase;
  font-size: calc(1rem + 0.75vw);
  --Inter-wght: 600;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

main {
  margin: 2rem;
}

.portrait--box {
  height: 33vw;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: minmax(33vw, 250px);
  gap: 0.5rem;
}

.bar {
  background-color: var(--bhaus-Red);
}

.portrait-bar {
  flex: 2 1 auto;
  height: 33vw;
  grid-column: 1;
}

section img {
  height: 33vw;
  object-fit: cover;
  flex: 0 2 33vw;
  width: 100%;
  grid-column: 2;
}

h1 {
  --Inter-wght: 897;
  font-size: calc(1.75em + 3.5vw);
  letter-spacing: -0.011em;
  text-align: center;
}

.description--event {
  background-color: var(--bhaus-Red);
  width: max-content;
  --Inter-wght: 766;
  padding: 0 3px 0 5px;
  font-size: 1em;
  letter-spacing: 0.044em;
}

.birth--wrapper {
  display: block;
  margin-left: 0.75rem;
  margin-top: -0.5rem;
}

.age {
  font-size: 3.6em;
  color: var(--bhaus-Red);
  letter-spacing: -0.046em;
  --Inter-wght: 759;
  display: block;
}

.birth--wrapper > span:nth-of-type(2) {
  color: var(--bhaus-Red);
  --Inter-wght: 819;
  display: block;
  margin-top: -1.75em;
  letter-spacing: 0.056em;
  font-size: 0.8em;
}

.location {
  display: grid;
  grid-column-gap: 0.5rem;
  grid-template-columns: 2fr 1fr 20px;
  grid-template-rows: 1fr max-content;
  margin: 3rem 0 1rem 0;
}

.text--left {
  text-align: left;
}

.bar--address {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.location h3 {
  line-height: 1.06em;
  grid-column: 2;
}

h3 span {
  display: block;
  --Inter-wght: 743;
  letter-spacing: 0.06em;
}

h3 span:nth-of-type(2) {
  letter-spacing: 0.131em;
}

.street--number {
  letter-spacing: 0.072em;
  grid-column: 2;
}

.bar--art-description {
  color: var(--bhaus-Red);
  height: 20px;
  width: 33vw;
}

.text--right {
  text-align: right;
}

.art-description {
  color: var(--bhaus-Red);
  width: max-content;
  padding-top: 0.5rem;
  font-size: 1.1rem;
  --Inter-wght: 656;
  letter-spacing: 0.036em;
}

footer {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: repeat(4, 2rem);
  border: 2px solid black;
  font-size: 0.8rem;
  margin: 2rem 0;
  --Inter-wght: 759;
  text-transform: none;
  max-width: 600px;
}

footer span {
  border: 1px solid black;
  padding: 0.5em;
}

footer span:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 2;
}

footer span:nth-child(2) {
  grid-column: 2;
}

footer span:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

footer span:nth-child(4) {
  grid-column: 1;
  grid-row: 3 / span 2;
}

footer span:nth-child(5) {
  grid-column: 2;
  grid-row: 3;
}

footer span:nth-child(6) {
  grid-column: 2;
  grid-row: 4;
}

a {
  text-decoration: none;
  padding: 0 1rem 0 0;
}

a:hover {
  text-decoration: underline;
}

a:active {
  color: black;
}

a:visited {
  color: hsl(204, 100%, 25%);
}

@media screen and (min-width: 400px) {
  h1 {
    font-size: calc(2.25em + 3.5vw);
  }
}

@media screen and (min-width: 500px) {
  h1 {
    font-size: calc(2.25em + 4.5vw);
  }
}

@media screen and (min-width: 800px) {
  main {
    display: grid;
    grid-template-columns: 5vw 40px 20vw 5vw 2fr 10vw min-content 20px 5vw;
    grid-template-rows: 5vh 40px max-content 125px max-content 5vh max-content 6vh min-content 5vh 1fr 40px 5vh;
    transform: rotate(-5deg);
  }

  .portrait--box {
    grid-column: 2 / 5;
    grid-row: 2 / 6;
    grid-template-columns: 40px 1fr;
    grid-template-rows: minmax(25vw, 300px);
    height: auto;
  }

  .portrait-bar {
    height: 100%;
  }

  section img {
    height: 100%;
    width: auto;
    grid-row: 1;
    object-fit: cover;
  }

  h1 {
    grid-row: 7;
    grid-column: 2 / 8;
    line-height: 1.1em;
    font-size: 6.5em;
    font-size: calc(3.5em + 4vw);
  }

  .description--event {
    grid-row: 8 / 9;
    grid-column: 4 / span 3;
    font-size: 1.4em;
    padding-bottom: 1.25em;
  }

  .birth--wrapper {
    grid-column: 3;
    grid-row: 11 / end;
    margin-top: -1em;
  }

  .location {
    grid-column: 7;
    grid-row: 2 / 4;
    grid-row-gap: 0.5rem;
    grid-template-columns: 1fr;
    grid-template-rows: 20px max-content max-content;
    margin: 0;
  }

  .location h3 {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
  }

  .street--number {
    grid-column: 1;
    grid-row: 3;
    line-height: 0.8em;
    justify-self: center;
  }

  .bar--address {
    grid-column: 1;
    grid-row: 1;
  }

  .bar--art-description {
    height: 100%;
    width: 20px;
    grid-row: 4 / 5;
    grid-column: 7;
    justify-self: end;
  }

  .art-description {
    grid-row: 5;
    grid-column: 7;
    padding-top: 0;
    align-self: end;
    justify-self: end;
    font-size: 0.821em;
  }

  footer {
    grid-row: 11;
    grid-column: 7 / 8;
    margin: 0;
    grid-template-columns: 1fr max-content;
  }
}

@media screen and (min-width: 1000px) {
  h1 {
    font-size: calc(5.5em + 1vw);
    letter-spacing: -0.002em;
  }

  .birth--wrapper {
    grid-column: 4;
  }
  main {
    grid-template-columns: 5vw 40px 20vw 5vw 2fr 3fr min-content 20px 5vw;
    grid-template-rows: 5vw 40px max-content 125px max-content 5vh max-content 6vh min-content 5vh 1fr 40px 5vw;
  }
  @media screen and (min-width: 1200px) {
    h1 {
      font-size: calc(6em + 1vw);
    }
  }
}