@import url(cssreset.css);
@import url(attribution.css);
@import url(fonts.css);
.no-margin {
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

main {
  display: flex;
  flex-direction: column;
  background-color: hsl(0, 0%, 98%);
  font-family: "Poppins";
  color: hsl(234, 12%, 34%);
  padding: 2em;
  gap: 5rem;
}

.introduction {
  display: grid;
  text-align: center;
  max-width: 34rem;
  align-self: center;
}

.headings {
  display: flex;
  flex-direction: column-reverse;
}

h1 {
  margin-top: 0.5rem;
}

p {
  color: hsl(229, 6%, 66%);
}

.card--section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.card {
  background-color: #ffffff;
  width: 100%;
  max-width: 23.3rem;
  box-shadow: 0 1rem 1.5rem -0.5rem hsl(229, 6%, 66%);
  border-radius: 0.5rem;
  overflow: hidden;
  padding-bottom: 2rem;
}

.card__content {
  padding: 2rem;
}
.card__content .content__title {
  margin: 0;
}
.card__content .content__text {
  margin-top: 0.25rem;
}
.card__content .content__icon {
  margin-top: 2rem;
  float: right;
}

.card__line {
  height: 0.25rem;
}

#card-1 .card__line {
  background-color: hsl(180, 62%, 55%);
}

#card-2 .card__line {
  background-color: hsl(0, 78%, 62%);
}

#card-3 .card__line {
  background-color: hsl(34, 97%, 64%);
}

#card-4 .card__line {
  background-color: hsl(212, 86%, 64%);
}

@media screen and (min-width: 72.125rem) {
  .card--section {
    display: grid;
    grid-template: repeat(2, auto)/repeat(3, auto);
  }
  #card-1 {
    grid-row: 1/3;
    grid-column: 1/2;
  }
  #card-4 {
    grid-row: 1/3;
    grid-column: 3/4;
  }
  h1 {
    font-size: 2.2rem;
    margin-top: 0.5rem;
  }
  h2 {
    font-size: 2.2rem;
  }
}/*# sourceMappingURL=index.css.map */