@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400&display=swap');

:root {
  --color-1: #ffffff;
  --color-2: #ab5cdb;
  --color-3: #0a0c1c;
  --color-4: #1b1937;
}

/* css reset begins */

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

* {
  margin: 0;
}

body {
  -webkit-font-smoothing: antialiased;
  height: 100vh;
  width: 100vw;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
}

/* css reset ends */

/* selector css */

body {
  background-color: var(--color-3);
  color: color-mix(in srgb, var(--color-1) 75%, transparent);
  display: flex;
  padding: 5.5rem 1.5rem;
  place-content: center;
  place-items: center;
}

/* class css */

.attribution {
  display: none;
}

.card {
  background-color: var(--color-4);
  border-radius: 0.5rem;
  column-gap: 1.875rem;
  display: flex;
  flex-flow: row-reverse nowrap;
  overflow: hidden;
}

.card-img {
  background-color: var(--color-2);
  flex-basis: 100%;
  max-width: 540px;
  text-align: center;
}

.card-img img {
  object-fit: cover;
  object-position: center;
  opacity: 0.75;
  mix-blend-mode: multiply;
}

.card-content {
  display: flex;
  flex-flow: column nowrap;
  gap: 4.5rem;
  max-width: 540px;
  padding: 4.5rem 4.5rem 3.7rem 4.5rem;
}

.card-content-info {
  display: flex;
  flex-flow: column nowrap;
  gap: 1.5rem;
}

.card-content-info>h1 {
  color: var(--color-1);
  font: 700 2.25rem / 2.75rem 'Inter', sans-serif;
  letter-spacing: 0.2px;
  opacity: 1;
}

.card-content-info>h1>span {
  color: var(--color-2);
}

.card-content-info p {
  font: 400 0.9375rem / 1.5625rem 'Inter', sans-serif;
  max-width: 374px;
}

.card-content-stats {
  display: flex;
  flex-flow: row nowrap;
  gap: 4rem;
  padding: 0;
  place-items: center;
  place-content: flex-start;
}

.card-content-stats-item {
  display: flex;
  flex-flow: column nowrap;
  gap: 0.125rem;
}

.card-content-stats-item h2 {
  color: var(--color-1);
  font: 700 1.5rem / 1.2 'Inter', sans-serif;
  letter-spacing: 1px;
}

.card-content-stats-item p {
  color: color-mix(in srgb, var(--color-1) 60%, transparent);
  font: 400 0.75rem / 1.5625rem 'Lexend Deca', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
}


/* media queries */

@media (max-width: 1158px) {
  .card {
    flex-flow: column wrap;
  }

  .card-content {
    gap: 2.5rem;
    padding: 2rem;
    text-align: center;
  }

  .card-content-info {
    gap: 1rem;
    place-content: center;
    place-items: center;
  }

  .card-content-info>h1 {
    font: 700 1.75rem / 2rem 'Inter', sans-serif;
  }

  .card-content-stats {
    flex-flow: column nowrap;
    gap: 1.5rem;
  }
}