@import url(font/stylesheet.css);

#grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 3fr 2fr 2fr 30%;
}

.card {
  background-color: cornsilk;
  box-shadow: 3px 2px 2px gray;
  padding: 10px;
  font-family: "Gilroy", sans-serif;

  &:nth-child(1) {
    font-weight: 900;
    margin-right: 15px;
  }

  &:nth-child(2) {
    font-weight: 100;
    font-style: italic;
    margin-left: -15px;
  }

  &:nth-child(3) {
    grid-column: -3 / -1;
    font-weight: 200;
    font-size: 1.1em;
  }

  &:nth-child(4) {
    grid-column: 1 / 4;
    font-weight: 300;
    font-style: italic;
  }

  &:nth-child(5) {
    font-weight: 500;
  }

  &:nth-child(7) {
    grid-column: -4 / -1;
    font-weight: 700;
    font-style: italic;
  }

  &:nth-child(8) {
    grid-column: 1 / -1;
    font-weight: 600;
  }
}

p {
  margin: 0;
}