*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --clr-primary-very-dark-blue: hsl(233, 47%, 7%);
  --clr-primary-dark-desaturated-blue: hsl(244, 38%, 16%);
  --clr-primary-soft-violet: hsl(277, 64%, 61%);

  --clr-neutral-white: hsl(0, 0%, 100%);
  --clr-neutral-slightly-transparent-white-main: hsla(0, 0%, 100%, 0.75);
  --clr-neutral-slightly-transparent-white-stat: hsla(0, 0%, 100%, 0.6);

  --fs-normal: 15px;
  --fw-normal: 400;
  --fw-bold: 700;

  --font-family-inter: 'Inter', serif;
  --font-family-lexend-deca: 'Lexend Deca', sans-serif;

  --border-radius: 8px;
}

body {
  height: 100vh;
  background-color: var(--clr-primary-very-dark-blue);
  display: grid;
  place-content: center;
  color: var(--clr-neutral-white);
  font-family: var(--font-family-inter);
}

.card {
  max-width: 327px;
  border-radius: var(--border-radius);
  background-color: var(--clr-primary-dark-desaturated-blue);
}

.header-image-wrapper {
  background-color: var(--clr-primary-soft-violet);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;

}

img {
  width: 100%;
  display: block;
  

  /* overlay purple
  filter: grayscale(100%) brightness(70%) sepia(50%) hue-rotate(-110deg)
    saturate(400%); */

  mix-blend-mode: multiply;
  opacity: 0.8;
}

.text {
  padding: 40px 32px 32px 32px;
  text-align: center;
}

.heading {
  font-size: 28px;
  line-height: 32px;

  margin-bottom: 16px;
}

.heading span {
  color: var(--clr-primary-soft-violet);
}

.copy {
  font-size: var(--fs-normal);
  line-height: 25px;
  margin-bottom: 40px;
  opacity: 75%;
}

.stats {
  display: grid;
  gap: 24px;
}

.number {
  font-weight: var(--fw-bold);
  font-size: 24px;
  margin-bottom: 2px;
}

.info {
  font-family: var(--font-family-lexend-deca);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 60%;
}

@media (min-width: 768px) {
  body {
    margin: 1rem;
  }
  .card {
    display: flex;
    flex-direction: row-reverse;
    max-width: 700px;
  }

  img {
    width: 100%;
    height: 100%;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
  }

  .text {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    text-align: left;
    padding: 40px;
  }

  .heading {
    max-width: 403px;
  }

  .copy {
    max-width: 374px;
  }

  .stats {
    width: 90%;
    display: flex;
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  .card {
    max-width: 1000px;
  }

  .text {
    padding: 60px;
  }
}

@media (min-width: 1280px) {
  .card {
    max-width: 1100px;
  }

  .text {
    padding: 72px;
  }
}