.hero__audio-container {
  padding-top: 15px;
  padding-bottom: 40px;
}
@media (min-width: 48em) {
  .hero__audio-container {
    padding-top: 90px;
    padding-bottom: 90px;
  }
}
.hero__audio-container.l--offset {
  -webkit-padding-start: 15px;
          padding-inline-start: 15px;
  -webkit-padding-end: 15px;
          padding-inline-end: 15px;
  margin: 0 auto;
  max-width: 964px;
}
@media (min-width: 48em) {
  .hero__audio-container.l--offset {
    -webkit-padding-start: 7.4074074074%;
            padding-inline-start: 7.4074074074%;
    -webkit-padding-end: 7.4074074074%;
            padding-inline-end: 7.4074074074%;
  }
}
@media (min-width: 48em) {
  .hero__audio-container .hero__audio-wrapper {
    padding: 0 0 0 60px;
  }
}
.hero__audio-container audio {
  width: 100%;
  border-radius: 25px;
  border: 2px solid var(--color-tan);
}
.hero__audio-container .field--name-field-media-audio-file {
  margin-bottom: 10px;
}

@media (min-width: 75em) {
  .hero__image--container.c-audio__hero-image {
    max-width: 100%;
  }
}

@media (min-width: 75em) {
  .hero__image--wrapper.c-audio__hero-image-wrapper {
    -webkit-margin-end: -90px;
            margin-inline-end: -90px;
    -webkit-padding-start: 80px;
            padding-inline-start: 80px;
  }
}

.c-audio__label {
  font-family: var(--font-family-sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 160%;
  color: black;
  display: -webkit-box;
  display: flex;
  align-content: flex-start;
  margin-bottom: 20px;
}

.c-audio__icon {
  -webkit-padding-end: 8px;
          padding-inline-end: 8px;
}

.c-audio__download {
  font-family: var(--font-family-sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 160%;
  text-decoration-line: underline;
  color: var(--color-ictj-blue);
}

.field--name-field-media-image img {
  width: inherit;
}
@media (min-width: 75em) {
  .field--name-field-media-image img {
    width: 100%;
  }
}

.align-hero-with-image .hero__image--wrapper.c-audio__hero-image-wrapper .field--name-field-media-credit {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
}
.align-hero-with-image .hero__image--wrapper.c-audio__hero-image-wrapper .field--name-field-media-credit p {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  position: absolute;
  bottom: 10px;
  padding: 5px;
  inset-inline-end: 0;
  font-family: var(--font-family-sans);
  font-style: normal;
  font-weight: normal;
  font-size: 0.875rem;
  line-height: 160%;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}