/* Decorative section photography follows the supplied design concepts. */
.cases,
.pricing,
.process {
  position: relative;
  isolation: isolate;
}

.section-art {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.section-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top;
}

.section-art::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cases-art {
  height: clamp(500px, 45vw, 720px);
}

.cases-art::after {
  background: linear-gradient(90deg, transparent 40%, #11121033 100%),
    linear-gradient(0deg, #111210 0%, transparent 65%);
}

.cases .max-link {
  text-shadow: 0 2px 10px #000;
}

.pricing-art {
  height: min(100%, 850px);
}

.pricing-art img {
  object-position: right bottom;
}

.pricing-art::after {
  background: linear-gradient(0deg, #151613 0%, transparent 38%);
}

.pricing .table-scroll {
  background: #151613ed;
}

.pricing .download-link {
  background: #151613db;
}

.pricing .price-aside {
  isolation: auto;
  overflow: visible;
}

.pricing .price-aside::after {
  display: none;
}

.pricing .price-aside > div {
  background: linear-gradient(0deg, #151613eb 0%, #151613b3 65%, transparent 100%);
  padding-top: 70px;
}

.process-art {
  left: auto;
  width: 64%;
  height: min(100%, 340px);
  /* Fade the entire photo layer into the section, including its dark backdrop. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%),
    linear-gradient(180deg, transparent 0%, #000 24%, #000 62%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%),
    linear-gradient(180deg, transparent 0%, #000 24%, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.process-art::after {
  background: linear-gradient(0deg, #111210 0%, transparent 48%);
}

.about-content {
  position: relative;
  isolation: isolate;
  align-self: stretch;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #111210;
}

.about-art {
  inset: 0;
}

.about-art img {
  object-position: right center;
}

.about-art::after {
  background: linear-gradient(90deg, #11121066 0%, #11121014 75%),
    linear-gradient(0deg, #1112109c 0%, transparent 58%);
}

.about-content > p {
  color: #c6c7bf;
  text-shadow: 0 1px 8px #111210;
}

.about-content .text-link {
  align-self: flex-start;
}

@media (max-width: 1000px) {
  .cases-art {
    height: 480px;
  }

  .cases-art::after {
    background: linear-gradient(90deg, #111210 0%, #11121022 80%),
      linear-gradient(0deg, #111210 0%, transparent 90%);
  }

  .pricing-art {
    height: min(100%, 950px);
  }

  .pricing-art::after {
    background: linear-gradient(90deg, #15161388 0%, transparent 100%),
      linear-gradient(0deg, #151613 0%, transparent 80%);
  }

  .process-art {
    width: 100%;
    height: 430px;
  }

  .process-art::after {
    background: linear-gradient(90deg, #11121077 0%, transparent 100%),
      linear-gradient(0deg, #111210 0%, transparent 80%);
  }
}

@media (max-width: 640px) {
  .cases-art {
    height: 430px;
  }

  .cases-art img {
    object-position: 80% top;
  }

  .cases-art::after {
    background: linear-gradient(90deg, #111210e6 0%, #11121044 100%),
      linear-gradient(0deg, #111210 0%, transparent 85%);
  }

  .pricing-art {
    height: min(100%, 780px);
  }

  .pricing-art img {
    object-position: 80% top;
  }

  .pricing-art::after {
    background: linear-gradient(90deg, #151613e6 0%, #15161366 100%),
      linear-gradient(0deg, #151613 0%, transparent 90%);
  }

  .process-art {
    height: 360px;
  }

  .process-art::after {
    background: linear-gradient(90deg, #111210dd 0%, #11121055 100%),
      linear-gradient(0deg, #111210 0%, transparent 90%);
  }

  .about-art img {
    object-position: right center;
  }

  .about-art::after {
    background: linear-gradient(90deg, #111210b3 0%, #11121055 100%),
      linear-gradient(0deg, #111210b3 0%, transparent 90%);
  }
}

@media print {
  .section-art {
    display: none;
  }
}