button:focus, input:focus {
  outline: none;
}

.grid {
  max-width: 960px;
  margin: 0 auto;
  padding: 3rem 0;
}
.grid .nav {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, 2fr);
  margin-bottom: 2rem;
}
@media screen and (max-width: 900px) {
  .grid .nav {
    padding-left: 1rem;
  }
}
.grid .nav h2 {
  grid-column: 1/8;
  margin: 0;
}
@media screen and (max-width: 900px) {
  .grid .nav h2 {
    grid-column: 1/13;
    grid-row: 1/2;
    margin-bottom: 1rem;
  }
}
.grid .nav .links {
  grid-column: 8/12;
  text-align: right;
}
@media screen and (max-width: 900px) {
  .grid .nav .links {
    grid-column: 1/13;
    grid-row: 2/3;
    text-align: left;
  }
}
.grid .nav .links a {
  font-weight: bold;
  color: #6f6f6f;
  transition: 0.5s;
  text-decoration: none;
}
.grid .nav .links a:hover {
  color: #212121;
  transition: 0.5s;
}
.grid .nav .links a:first-child {
  margin-right: 0.6rem;
}
.grid .cards {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(5, 2fr);
}
@media screen and (max-width: 900px) {
  .grid .cards {
    grid-template-rows: repeat(9, 2fr);
  }
}
.grid .cards .bg {
  background-color: #fff;
  box-shadow: 0px 1px 12px 0px rgba(74, 74, 74, 0.34);
  cursor: pointer;
  transition: 0.5s;
}
@media screen and (max-width: 900px) {
  .grid .cards .bg {
    margin-bottom: 1rem;
  }
}
.grid .cards .bg:hover {
  box-shadow: 0px 1px 20px 0px rgba(74, 74, 74, 0.64);
  transition: 0.5s;
}
.grid .cards .card {
  padding: 1rem 2rem 4rem 1rem;
}
.grid .cards .learn {
  background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
  color: #fff;
}
.grid .cards .card-learn {
  grid-column: 1/6;
}
@media screen and (max-width: 900px) {
  .grid .cards .card-learn {
    grid-column: 1/13;
    grid-row: 8/9;
  }
}
.grid .cards .card-download {
  grid-column: 6/9;
  word-break: break-all;
  grid-row: 1/3;
  z-index: 1;
  background-image: linear-gradient(147deg, #8addd3 0%, #555dd9 74%);
  color: #fff;
}
@media screen and (max-width: 900px) {
  .grid .cards .card-download {
    grid-column: 1/13;
    grid-row: 2/3;
  }
}
.grid .cards .add {
  grid-column: 9/13;
  padding: 2rem 0.5rem 2rem 1rem;
  z-index: 1;
}
@media screen and (max-width: 900px) {
  .grid .cards .add {
    grid-column: 1/13;
    grid-row: 1/2;
  }
}
.grid .cards .add input {
  box-shadow: 0px 1px 12px 0px rgba(74, 74, 74, 0.34);
  border: 2px solid #d2d2d2;
  padding: 0.7rem 0 0.8rem 0.7rem;
  border-radius: 5px;
}
.grid .cards .add button {
  cursor: pointer;
  border: none;
  border-radius: 100%;
  padding: 1rem 1.3rem;
  position: relative;
  right: 18px;
  background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
  box-shadow: 0px 2px 16px 0px rgba(255, 37, 37, 0.55);
  color: #fff;
}
.grid .cards .card-design {
  grid-column: 1/6;
  grid-row: 2/4;
  z-index: 1;
  background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
  color: #fff;
}
@media screen and (max-width: 900px) {
  .grid .cards .card-design {
    grid-column: 1/13;
    grid-row: 3/4;
  }
}
.grid .cards .card-get {
  grid-column: 9/12;
  grid-row: 2/3;
  background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%);
  color: #212121;
}
@media screen and (max-width: 900px) {
  .grid .cards .card-get {
    grid-column: 1/13;
    grid-row: 4/5;
  }
}
.grid .cards .card-train {
  grid-column: 6/10;
  grid-row: 3/5;
  z-index: 1;
  background-image: linear-gradient(147deg, #f35240 0%, #dd2235 74%);
  color: #fff;
}
@media screen and (max-width: 900px) {
  .grid .cards .card-train {
    grid-column: 1/13;
    grid-row: 5/6;
  }
}
.grid .cards .card-learn-js {
  grid-column: 4/6;
  grid-row: 4/6;
}
@media screen and (max-width: 900px) {
  .grid .cards .card-learn-js {
    grid-column: 1/13;
    grid-row: 6/7;
  }
}
.grid .cards .card-visit {
  grid-column: 10/12;
  grid-row: 3/5;
  background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
  color: #212121;
}
@media screen and (max-width: 900px) {
  .grid .cards .card-visit {
    grid-column: 1/13;
    grid-row: 7/8;
  }
}