/**
 * Component: banner image (ports SingleBannerImage.scss).
 * Height uses padding-top (not aspect-ratio) to size against the full-width parent.
 */

.ssr-banner {
  display: flex;
  align-items: flex-end;
  width: auto;
  margin: 35px auto 0;
  padding-top: 40%;
  background-color: #999;
  background-image: var(--ssr-banner-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 1024px) {
  .ssr-banner {
    max-width: 960px;
  }
}

@media (min-width: 1216px) {
  .ssr-banner {
    max-width: 1152px;
  }
}

@media (min-width: 1408px) {
  .ssr-banner {
    max-width: 1344px;
  }
}

@media (max-width: 1023px) {
  .ssr-banner {
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .ssr-banner {
    padding-top: 66.66%;
  }
}

.ssr-banner__source {
  margin-bottom: 10px;
  margin-left: 10px;
  padding: 5px;
  overflow: hidden;
  font-size: 15px;
  color: var(--ssr-color-neutral-900);
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(255, 255, 255, .6);
  border-radius: var(--ssr-radius-md);
}

@media (max-width: 768px) {
  .ssr-banner__source {
    margin: 10px;
    font-size: 12px;
  }
}