h1 {
  font-size: 3.6rem;
  padding-bottom: 4.4rem;
}

.intro {
  padding: 6.4rem 3.2rem;
}

.nav.sticky {
  position: fixed;
  width: 100%;
  background-color: #edfbff;
  z-index: 99999999;
  border-bottom: 1px solid #929497;
}

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.intro-text-area {
  align-self: center;
  justify-self: left;
}

.intro-text {
  font-size: 1.6rem;
  line-height: 1.6;
  padding-bottom: 3.2rem;
  padding-left: 6.4rem;
}

.splash-img {
  max-width: 500px;
  justify-self: center;
}

.designs-header {
  font-size: 3.6rem;
  font-weight: 600;
}

.intro-text {
  text-indent: 3rem;
  max-width: 75ch;
}

.toolbox {
  padding-bottom: 6.4rem;
}

.toolbox-container {
  display: flex;
  justify-content: space-around;
}

.toolbox-img {
  max-width: 10rem;
}

.examples {
  margin: 0 auto;
}

.examples-container {
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  justify-items: center;
  align-items: center;
}

.smm-img-item {
  overflow: hidden;
}

.smm-img {
  width: 100%;
  display: block;
  transition: all 0.3s;
}

.smm-img:hover {
  transform: scale(1.05);
}

/*
  FONT SIZE SYSTEM (px)
  10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
   
  SPACING SYSTEM (px)
  2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
  */