@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_slnt\,wght.ttf");
}
@font-face {
  font-family: "LexendDeca";
  src: url("fonts/LexendDeca-VariableFont_wght.ttf");
}
:root {
  /* color primary*/
  --navy-950: hsl(233, 47%, 7%);
  --blue-950: hsl(244, 37%, 16%);
  --purple-500: hsl(277, 64%, 61%);

  /* color neutral*/
  --white-1: hsl(0, 0%, 100%);
  --white-2: hsla(0, 0%, 100%, 0.75);
  --white-3: hsla(0, 0%, 100%, 0.6);

  /* fomt weights*/
  --fw-400: 400;
  --fw-700: 700;
}
*,
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-size: 0.9375em;
  background-color: var(--navy-950);
  min-height: 100%;
  color: white;
}
article {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  width: 346px;
  background-color: var(--blue-950);
  border-radius: 0.7em;
  overflow: hidden;
}
section.responsive {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}
section.responsive img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
div.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--purple-500);
  filter: opacity(0.6);
}
section.body {
  padding: 3em 3em 2em 3em;
}
section.body h1 {
  font-family: "Inter", serif;
  font-size: 1.8em;
  color: var(--white-1);
  & span {
    color: var(--purple-500);
  }
  & + p {
    font-family: "Inter";
    line-height: 1.6;
    padding: 1em 0 3em 0;
    color: var(--white-2);
  }
}
section.body h2 {
  font-family: "Inter", sans-serif;
  color: var(--white-1);
}
div.text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
div.stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.7em;
}
div.stats p {
  font-family: "LexendDeca", courier;
  text-transform: uppercase;
  line-height: 1.8;
  font-size: 0.68em;
  color: var(--white-3);
}
@media (min-width: 55em) {
  article {
    display: flex;
    flex-direction: row-reverse;
    width: 65rem;
    height: auto;
  }
  section.responsive img {
    content: url("images/image-header-desktop.jpg");
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  section.body {
    padding: 3.6em 3em 0 4.5em;
  }
  section.body h1 {
    font-size: 2.5em;
    & + p {
      padding: 1.7em 2em 0 0;
    }
  }
  section.body h2 {
    font-size: 1.3em;
  }
  div.text {
    text-align: unset;
    padding: 0 3em 0 0;
  }
  div.stats {
    flex-direction: row;
    margin-top: 3.9em;
    justify-content: flex-start;
    gap: 6em;
  }
}