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

:root {
  --font-header: "Big Shoulders", sans-serif;
  --font-text: "Lexend Deca", sans-serif;
}

h1.title {
  font-family: var(--font-header);
  font-weight: 700;
}

p.desc,
a {
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 300;
  line-height: 180%;
}

/********** Component **********/

.root-container {
  min-height: 95vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-container {
  width: 100%;
  max-width: 950px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(307px, 1fr));
  grid-template-rows: 500px;
  grid-auto-rows: 500px;
}

[class*="item"] {
  color: white;
  padding: 50px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  grid-gap: 10px;
}

a {
  justify-self: start;
  align-self: end;
  background-color: white;
  padding: 14px 45px;
  border-radius: 30px;
  text-decoration: none;
}

.item1 {
  background-color: hsl(31, 77%, 52%);
}

.item1 a {
  color: hsl(31, 77%, 52%);
}

.item1 a:hover {
  background-color: hsl(31, 77%, 52%);
  color: white;
  border: 2px solid white;
}

.item2 {
  background-color: hsl(184, 100%, 22%);
}

.item2 a {
  color: hsl(184, 100%, 22%);
}

.item2 a:hover {
  background-color: hsl(184, 100%, 22%);
  color: white;
  border: 2px solid white;
}

.item3 {
  background-color: hsl(179, 100%, 13%);
}

.item3 a {
  color: hsl(179, 100%, 13%);
}

.item3 a:hover {
  background-color: hsl(179, 100%, 13%);
  color: white;
  border: 2px solid white;
}