/* Make the blue button line up with the text. */
.button-indented {
  margin: 16px 0 0 8px;
}

/* Remove default grey background on images. */
.devsite-landing-row-item-image {
  background: transparent;
}

/* Change 1-up layout to 1/3 image... */
.devsite-landing-row-1-up .devsite-landing-row-item-image {
  width: calc((100% - 80px) / 3)
}

/* ... and 2/3 text, with extra top/bottom margin. */
.devsite-landing-row-1-up .devsite-landing-row-item-description {
  margin: 80px 0;
  width: calc((100% - 20px) * 2/3);
}

/* Apply grey background to all rows except the first. */
.devsite-landing-row:nth-of-type(1n + 2) {
  background: #f7f7f7;
  margin: -40px -10000px;
  padding: 40px 10000px;
}

/*
 * Hide "last updated" and license notice because they look bad adjacent to the
 * grey background.
 */
.devsite-content-footer {
  display: none;
}

@media screen and (max-width: 1000px) {
  .devsite-landing-row-1-up .devsite-landing-row-item-description {
    margin: 0;
  }

  .devsite-landing-row:nth-of-type(1n + 2) {
    margin: 40px -10000px -40px;
  }
}

@media screen and (max-width: 720px) {
  .devsite-landing-row-1-up .devsite-landing-row-item-description {
    width: 100%;
  }
}