:root {
  --DAC_FEATURED_CARD_IMAGE_WIDTH: 192px;
}

/* Add padding around the contents of the featured card. */
.dac-android-11-page .a11-feature-cards .devsite-landing-row-item {
  padding: var(--DAC_SPACING_MEDIUM);
}

.dac-android-11-page .a11-feature-cards h3 {
  margin: 16px 0;
}

/* Override DevSite's margin inside featured cards (specificity required). */
.dac-android-11-page .a11-feature-cards.devsite-landing-row-1-up .devsite-landing-row-item[background] .devsite-landing-row-item-media+.devsite-landing-row-item-description {
  margin: 0;
  padding: 0 var(--DAC_SPACING_MEDIUM) 0 0;
}

/* Apply flex to horizontally center the image inside the element. */
.dac-android-11-page .a11-feature-cards .devsite-landing-row-item-media {
  display: flex;
  flex: 0 0 33.3%;
  justify-content: center;
}

/* Vertically center the image inside the featured card. */
.dac-android-11-page .a11-feature-cards .devsite-landing-row-item-image {
  align-self: center;
}

/* Set a width on the feature card image. */
.dac-android-11-page .a11-feature-cards .devsite-landing-row-item-image {
  width: var(--DAC_FEATURED_CARD_IMAGE_WIDTH);
}

/* Accounting for the box shadow thickness. */
.dac-android-11-page .a11-feature-cards .devsite-landing-row-item:last-child {
  margin-left: 44px;
}

@media screen and (max-width: 600px) {
  /* Remove the left padding for description on mobile (specificity required). */
  .dac-android-11-page .a11-feature-cards.devsite-landing-row-1-up .devsite-landing-row-item[background] .devsite-landing-row-item-media+.devsite-landing-row-item-description {
    padding: 0;
  }

  .dac-android-11-page .a11-feature-cards .devsite-landing-row-item:last-child {
    margin: 44px 0 0;
  }
}