/********** Fonts **********/

.header-light {
  font-family: "Poppins", sans-serif;
  font-size: 25px;
  font-weight: 200;
  text-align: center;
  line-height: 135%;
  color: #6a7178;
}

.title {
  font-family: "Poppins", sans-serif;
  font-size: 25px;
  font-weight: 600;
  text-align: center;
  line-height: 140%;
  color: #6a7178;
}

.header-desc {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 140%;
  text-align: center;
  color: #6a7178;
}

.tile-title {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 135%;
  color: #6a7178;
}

.tile-desc {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 140%;
  color: #6a7178;
}

.attribution {
  font-family: "Poppins", sans-serif;

  line-height: 140%;
  color: #6a7178;
}

/********* Card **********/

/* .root-container {
  border: 2px solid cyan;
} */

* {
  box-sizing: border-box;
}

body {
  background-color: #edf6f9;
}

header,
.feature-container {
  max-width: 325px;
  margin: 0 auto;
}

.header-light {
  margin-bottom: 6px;
}

.title {
  margin-top: 0;
}

.header-desc {
  text-align: center;
}

.feature-container {
  display: flex;
  flex-direction: column;
}

.tile--1 {
  border-top: 3.5px solid #44d3d2;
}

.tile--2 {
  border-top: 3.5px solid #ea5454;
}

.tile--3 {
  border-top: 3.5px solid #fcae4a;
}
.tile--4 {
  border-top: 3.5px solid #549ef2;
}

[class*="tile--"] {
  max-width: 314px;
  height: 250px;
  padding: 1.5rem;
  border-radius: 8px;
  margin-top: 20px;
  background-color: white;

  box-shadow: 1px 1px 1px 1px #6a7178;
}

[class*="tile--"] img {
  position: relative;
  left: 200px;
  top: 30px;
}

.attribution {
  font-size: 11px;
  text-align: center;
}
.attribution a {
  color: hsl(228, 45%, 44%);
  text-decoration: none;
}

@media (min-width: 1220px) {
  .header-light {
    font-size: 36px;
  }

  .title {
    font-size: 36px;
  }

  .header-desc {
    font-size: 15px;
  }

  .feature-container {
    max-width: 1200px;
  }

  header {
    max-width: 540px;
  }

  .feature-container {
    display: flex;
    flex-direction: row;
    gap: 25px;
    justify-content: center;
  }

  [class*="tile--"] {
    width: 350px;
    height: 250px;
  }

  [class*="tile--"] img {
    position: relative;
    left: 200px;
    top: 28px;
  }

  .tile--1 {
    align-self: center;
  }

  .tile--4 {
    align-self: center;
  }
}