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

html {
  font-size: clamp(16px, 1.7vw, 18px);
  color: hsl(212, 6%, 44%);
}

body {
  font: 400 0.9375rem "Poppins", sans-serif;
  display: flex;
  height: 100dvh;
}

.container {
  margin: auto;
  background-color: hsl(0, 0%, 100%);
  padding: 3rem 2rem;
}

.info {
  text-align: center;
}
.info__title {
  font: 200 1.5rem "Poppins", sans-serif;
  color: hsl(234, 12%, 34%);
}
.info__title--bold {
  font: 600 1.5rem "Poppins", sans-serif;
  color: hsl(234, 12%, 34%);
  margin-bottom: 1rem;
}
.info__description {
  color: hsl(234, 12%, 34%);
  margin-bottom: 3rem;
}

.card__container {
  display: grid;
  grid-template: repeat(4, 1fr)/auto;
  gap: 2rem;
}

.card {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  padding: 2rem;
  box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.1);
}
.card__title {
  font-weight: 600;
  font-size: 1.2rem;
  color: hsl(234, 12%, 34%);
  margin-bottom: 0.5rem;
}
.card__description {
  font-size: 0.8rem;
  margin-bottom: 1.5rem;
}
.card img {
  margin-left: auto;
}
.card--border-top-blue {
  border-top: 5px solid hsl(212, 86%, 64%);
}
.card--border-top-green {
  border-top: 3px solid hsl(180, 62%, 55%);
}
.card--border-top-red {
  border-top: 3px solid hsl(0, 78%, 62%);
}
.card--border-top-orange {
  border-top: 3px solid hsl(34, 97%, 64%);
}

@media (min-width: 48rem) {
  .info {
    margin: auto;
    width: 40%;
  }
  .info__title, .info__title--bold {
    font-size: 2rem;
  }
  .card__container {
    display: grid;
    grid-template: repeat(4, 1fr)/repeat(3, 1fr);
  }
  .card--top {
    grid-column: 2;
    grid-row: 1/3;
  }
  .card--right {
    grid-column: 3;
    grid-row: 2/4;
  }
  .card--bottom {
    grid-column: 2;
    grid-row: 3/5;
  }
  .card--left {
    grid-column: 1;
    grid-row: 2/4;
  }
}

/*# sourceMappingURL=style.css.map */