/**
 * CD Hero
 */

.cd-hero {
  position: relative;
  text-align: center;
}

.cd-hero__image {
  display: block;
  width: 100%;
  height: 16rem; /* 256px */
}

@supports (object-fit: cover) {
  .cd-hero__image {
    object-fit: cover;
    object-position: 50% 50%;
  }
}

.cd-hero__container {
  position: relative;
  bottom: 0;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
  background-color: var(--cd-white);
}

.cd-hero__title {
  margin: 0 0 1rem;
  color: var(--cd-grey--dark);
  font-family: var(--cd-font--roboto);
  font-size: 2rem; /* 32px */
  font-weight: 700;
}

.cd-hero__description {
  margin: 0 0 1rem;
  color: var(--cd-grey--dark);
  font-size: 1rem;
  font-weight: 500;
}

@media (min-width: 576px) {
  .cd-hero__footer {
    display: flex;
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  .cd-hero {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: flex-end;
    height: 28rem; /* 448px */
  }

  .cd-hero__container {
    position: relative;
    z-index: 2;
    max-width: var(--cd-max-content-width);
    text-align: center;
    background-color: transparent;
  }

  .cd-hero__title {
    font-size: 2.5rem;
  }

  .cd-hero__description {
    font-size: 1.125rem; /* 18px */
    font-weight: 500;
  }

  .cd-hero__image {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 28rem; /* 448px */
    transform: translate(-50%, -50%);
  }

  @supports (object-fit: cover) {
    .cd-hero__image {
      top: 0;
      left: 0;
      transform: none;
    }
  }
}

/* For IE11 */
@media all and (-ms-high-contrast: none) {
  .cd-hero__image {
    height: auto;
  }
}

/* Microsoft Edge Browser 15+ - @supports method */
@supports (-ms-ime-align:auto) and (-webkit-text-stroke:initial) {
  .cd-hero__image {
    height: auto;
  }
  /* Exclude for Edge 16+ */
  @supports (object-fit: cover) {
    .cd-hero__image {
      height: inherit;
    }
  }
}

@media (min-width: 1366px) {
  @supports (object-fit: cover) {
    .cd-hero__image {
      object-fit: none;
    }

    .cd-bleed .cd-hero__image {
      object-fit: cover;
    }
  }
}