.azs-header {
  margin-top: calc(-3 * var(--block-offset));
  margin-right: calc(-1 * var(--block-offset));
  margin-left: calc(-1 * var(--block-offset));
}

.azs-header__content {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 133.4375%;
}

.azs-header__image {
  position: absolute;
  inset: 0;
  padding: 1.75em var(--block-offset);
  background-color: var(--color-secondary);
  background-image: url(./img/xs.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.azs-header__text {
  text-align: center;
}

.page h2.azs-header__text {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.25rem;
  font-weight: 400;
}

.azs-header__marked {
  display: block;
  margin-top: 1em;
  margin-bottom: 0.25em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
}

@media (min-width: 400px) {
  .azs-header__content {
    padding-top: 60%;
  }

  .azs-header__image {
    display: flex;
    align-items: center;
    padding: var(--block-offset);
    background-image: url(./img/sm.webp);
  }

  .azs-header__text {
    width: 60%;
    text-align: left;
  }

  .azs-header__marked {
    font-size: 1.3em;
  }
}

@media (min-width: 576px) {
  .azs-header {
    margin-right: 0;
    margin-left: 0;
  }
}

@media (min-width: 768px) {
  .azs-header__content {
    padding-top: 53.28%;
  }

  .azs-header__image {
    padding: calc(2 * var(--block-offset));
    background-image: url(./img/md.webp);
  }
}

@media (min-width: 992px) {
  .azs-header__content {
    padding-top: 28.42%;
  }

  .azs-header__image {
    background-image: url(./img/lg.webp);
  }

  .azs-header__text {
    width: 47%;
  }
}

@media (min-width: 1200px) {
  .azs-header__content {
    padding-top: 21.31%;
  }

  .azs-header__image {
    background-image: url(./img/xl.webp);
  }

  .azs-header__text {
    width: 47%;
  }

  .page h2.azs-header__text {
    font-size: 1.5rem;
  }
}

@media (min-width: 1600px) {
  .azs-header__image {
    padding: calc(7 * var(--block-offset));
  }
}