.page-image {
  margin: 70px 0;
  @media (max-width: 1440px) {
    margin: 60px 0;
  }
  @media (max-width: 1366px) {
    margin: 50px 0;
  }
  @media (max-width: 1024px) {
    margin: 40px 0;
  }
  @media (max-width: 768px) {
    margin: 30px 0;
  }
  .container {
    figure {
      position: relative;
      img {
        width: 100%;
        z-index: 1;
      }
      &:after {
        display: block;
        position: absolute;
        content: '';
        width: 900px;
        height: 100px;
        top: 0;
        right: 0;
        transform: translateY(-50%);
        background-color: var(--c-secondary-50);
        opacity: 0.8;
        @media (max-width: 1680px) {
          width: 850px;
          height: 90px;
        }
        @media (max-width: 1440px) {
          width: 800px;
          height: 80px;
        }
        @media (max-width: 1366px) {
          width: 750px;
          height: 70px;
        }
        @media (max-width: 1024px) {
          width: 600px;
          height: 60px;
        }
        @media (max-width: 768px) {
          display: none;
        }
      }
    }
  }
  &.alt {
    .container {
      figure {
        &:after {
          width: auto;
          left: 40px;
          top: auto;
          right: 40px;
          bottom: 0;
          transform: translateY(50%);
          background-color: var(--c-secondary-50);
          opacity: 0.8;
          z-index: 2;
          @media (max-width: 1680px) {
            width: auto;
            height: 90px;
          }
          @media (max-width: 1440px) {
            width: auto;
            height: 80px;
          }
          @media (max-width: 1366px) {
            width: auto;
            height: 70px;
          }
          @media (max-width: 1024px) {
            width: auto;
            height: 60px;
            left: 30px;
            right: 30px;
          }
          @media (max-width: 768px) {
            display: none;
          }
        }
      }
    }
  }
}
