.collection-hero__inner {
  margin-bottom: 2rem;
}

@media screen and (min-width: 750px) {
  .collection-hero.collection-hero--with-image {
    padding: 0;
  }
}

.collection-hero--with-image .collection-hero__inner {
  margin-bottom: 0;
}

@media screen and (min-width: 750px) {
  .collection-hero--with-image {
    margin-bottom: 4.5rem;
  }

  .collection-hero__inner {
    margin-bottom: 0;
  }
}

.collection-hero__title {
  margin: 5rem 0 0;
}

.collection-hero__title + .collection-hero__description {
  font-size: 1.6rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  color: rgba(var(--color-foreground), 0.75);
  padding-top: 2rem;
}

@media screen and (min-width: 750px) {
  .collection-hero__title + .collection-hero__description {
    font-size: 1.8rem;
  }

  .collection-hero__description {
    max-width: 66.67%;
  }
}

.collection-hero--with-image .collection-hero__title {
  position: absolute;
  z-index: 1;
  width: 100%;
  bottom: 100%;
  margin: 0 0 3rem;
  color: #ffffff;
}

.collection-hero--with-image .collection-hero__description {
  margin-top: 0;
}

.collection-hero--with-image .collection-hero__title + .collection-hero__description {
  padding-top: 3rem;
}

.collection-hero--with-image .collection-hero__text-wrapper {
  position: relative;
}

.collection-hero__image-container {
  position: relative;
}

.collection-hero--contrast .collection-hero__image-container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-image: linear-gradient(to bottom, transparent 0%, rgba(54, 54, 54, 0.2) 40%, rgba(4, 4, 4, 0.46) 100%);
}

.collection-hero__image {
  min-height: 100%;
}

[data-heading-center] .collection-hero__text-wrapper {
  text-align: center;
}

[data-heading-center] .collection-hero__description {
  margin: auto;
}

@media screen and (max-width: 749px) {
  .collection-hero--mobile-bottom .collection-hero__title {
    position: static;
    color: rgb(var(--color-heading));
    margin: 3rem 0 0;
  }

  .collection-hero--mobile-bottom .collection-hero__title + .collection-hero__description {
    padding-top: 1.5rem;
  }

  #MainContent .collection-hero--mobile-bottom .collection-hero__image-container:before,
  .collection-hero--mobile-bottom .collection-hero__image-container:after {
    display: none;
  }
}