:root{
  --Very_dark_blue: hsl(233, 47%, 7%);
  --Dark_desaturated_blue: hsl(244, 38%, 16%);
  --Soft_violet: hsl(277, 64%, 61%);
  --White: hsl(0, 0%, 100%);
  --Slightly_transparent_white: hsla(0, 0%, 100%, 0.75);
  --Slightly_transparent_white_darker: hsla(0, 0%, 100%, 0.6);
}

*, a{
color:var(--Slightly_transparent_white);
font-family: 'Lexend Deca', sans-serif;
font-size: 12px;
font-weight: 200;
margin: 0px 0px 0px 0px;
text-decoration: none;
}

body{
  background-color: var(--Very_dark_blue);
}
.card-container {
  background-color: var(--Dark_desaturated_blue);
  border-radius: 10px;
  display: grid;
  grid-template-rows: repeat(3, 1fr); /*questo serve per creare due righe di uguale altezza, 2volte 1frazione di spazio*/
  width:  350px;
  height: 850px;
  margin:30px 15px;
  margin-left: auto;
  margin-right: auto;
  grid-template-areas:
    "images"
    "description";
}

.images {
  grid-area: images;
  height: 239px;
  border-top-left-radius: 10px;
  border-bottom-left-radius:0px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 0px;
  background-image: url("./images/image-header-mobile.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: grayscale(100%) brightness(80%) sepia(50%) hue-rotate(-100deg) saturate(400%) contrast(1);
  opacity: 40%;
}

.description {
  grid-area: description;
  margin: 0px;
}

.insights{
  color: var(--Soft_violet);
  text-align: center;
  font-size: 30px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}

h1{
  text-align: center;
  padding-top: 30px;
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 25px;
  font-size: 30px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}

.textDescription{
  text-align: center;
  line-height: 1.8;
  padding-left: 35px;
  padding-right: 45px;
  font-size: 15.5px;
}

.statistics{
  padding-top: 15px;
  display: grid;
}

.centerDiv{
  width: 100px;
  margin:0 auto;
  padding-top: 35px;
}

.number{
  display: flex;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 30px;
  justify-content: center;
}
.statisticName{
  display: flex;
  padding-top: 8px;
  text-transform: uppercase;
  font-size: 15px;
  justify-content: center;
  letter-spacing: 1px;
}

  @media screen and (min-width: 700px){
    .card-container {
      grid-template-columns: repeat(2, 1fr);
      grid-template-areas: "description images";
      width: 1100px;
      height: 430px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 150px;
      margin-bottom: auto;
    }

    .images {
      width: 100%;
      height: 430px;
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      background-image: url("./images/image-header-desktop.jpg");
    }

    .description {
      margin: 40px 35px;
    }

    h1{
      text-align: left;
      padding: 25px;
      font-size: 35px;
    }
    .insights{
      font-size: 35px;
    }

    .textDescription{
      text-align: left;
      line-height: 1.7;
      padding-left: 25px;
      padding-right: 90px;
    }

    .statistics{
      padding-top: 38px;
      padding-right: 60px;
      display: flex;
    }

    .number{
      display: flex;
      font-size: 24px;
      justify-content: left;
    }

    .statisticName{
      padding-top: 6px;
      font-size: 12px;
      justify-content: left;
    }
    
  }