#speedpainting-landing {
  background: url("/images/speedpaint/girl-background-3-dark.jpg");
  background-size: auto;
  background-position: top right;
  background-repeat: no-repeat;
  background-color: hsla(200, 12%, 16%, 1);
}

@media (min-width: 768px) {
  #speedpainting-landing {
    background: url("/images/speedpaint/girl-background-3.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: hsla(200, 12%, 16%, 1);
  }
}

.usage-card#usage-scenery {
  background: linear-gradient(#84d230, #a0e752 50%);
  background: url("/images/speedpaint/scenery-6.jpg");
  background-size: cover;
  background-position: left bottom;
  background-repeat: no-repeat;
}

.usage-card#usage-art {
  background: linear-gradient(#e85d35, #ff805b 50%);
  background: url("/images/speedpaint/girl-art-6.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

section.speedpainting-features,
section.speedpainting-resources {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 5em 0;
}

@media (min-width: 768px) {
  section.speedpainting-features {
    padding: 15em 0 0 0;
  }
  section.speedpainting-resources {
    padding: 0 0 5em 0;
  }
}

@media (min-width: 768px) {
  .speedpainting-feature-detail-row {
    margin-bottom: 15em;
  }
}

.speedpainting-feature-detail-image {
  width: 90%;
}

.speedpainting-resources ul {
  list-style: none;
  padding: 0;
}

@media (min-width: 768px) {
  .speedpainting-resources ul {
    list-style: circle;
  }
}

.speedpainting-resources ul > li > a {
  display: block;
  text-decoration: underline;
}

.speedpainting-resources .resource-title {
  text-transform: uppercase;
  font-size: 14px;
  line-height: 32px;
  font-weight: 600;
  margin-bottom: 2em;
}

.speedpainting-resources h2 {
  font-size: 32px;
}