h3 { margin-bottom: 16px; }

.certifications {
  background-color: #FFF;

  ul { padding-left: 0; }
  li :is(h4, p) {
    letter-spacing: 0.5%;
    line-height: 1.5;
  }
  h4 {
    color: var(--dark-green);
    font-size: 24px;
  }
  .in-process { border: 2px solid var(--light-bronze); }
  .in-process h4 { color: var(--dark-bronze); }
  .in-process p:last-of-type {
    color: var(--dark-bronze);
    font-size: 16px;
  }
}

.photo-card img { object-fit: cover; }

.photo-card:nth-of-type(1) img { aspect-ratio: 600 / 450; }

.photo-card:nth-of-type(2) img { aspect-ratio: 680 / 434; }

.photo-card:nth-of-type(3) img { aspect-ratio: 481 / 361; }

.qms {
  background-position: center;
  background-size: cover;

  color: #FFF;

  .wrapper { background-color: var(--gray); }
  hgroup p { color: #FFF; }

  .cycle {
    display: flex;
    align-items: center;

    width: max-content;

    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
    text-transform: uppercase;
  }
}

.call-to-action:last-of-type {
  background-color: #FFF;

  b { color: #000; }
}

/* desktop only */

@media screen and (min-width: 900px) {
  .hero { background-image: url(/img/quality-hero-desk.avif); }

  .certifications hgroup { margin-bottom: 32px; }
  .certifications .wrapper > p { margin-bottom: 38px; }
  .certifications ul {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 36px 16px;
  }
  .certifications li {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: subgrid;
    row-gap: 8px;

    padding: 0 16px;
  }
  .certifications li img { align-self: center; }
  .certifications li :not(img) { grid-column: 2 / -1; }
  .certifications li.in-process { padding: 20px 16px; }
  .certifications li.in-process p:last-of-type { margin-top: 8px; }

  .qms { background-image: url(/img/qms-processes-bg-desk.avif); }
  .qms .wrapper { padding: 40px 48px; }
  .qms .cycle {
    gap: 12px;

    margin: 56px auto;

    letter-spacing: 5%;
  }

  .inspection hgroup { margin-bottom: 32px; }
}

/* mobile only */

@media screen and (max-width: 899px) {

  .hero {
    background-image: url(/img/quality-hero-mob.avif);
    background-position-y: bottom;
  }

  .certifications hgroup { margin-bottom: 28px; }
  .certifications .wrapper > p { margin-bottom: 40px; }
  .certifications li {
    display: block;

    padding: 0 16px;
  }
  .certifications li:not(:last-child) { margin-bottom: 36px; }
  .certifications li.in-process { padding: 16px; }
  .certifications li img { margin-bottom: 12px; }
  .certifications li h4 { margin-bottom: 8px; }
  .certifications li p:not(:last-child) { margin-bottom: 20px; }

  .qms { background-image: url(/img/qms-processes-bg-mob.avif); }
  .qms .wrapper {
    display: block;

    padding: 32px 24px;
  }
  .qms .cycle {
    flex-direction: column;
    gap: 8px;

    margin: 48px auto;

    letter-spacing: 0.5%;
  }
  .qms .cycle img {
    rotate: 90deg;
  }

  .inspection hgroup { margin-bottom: 28px; }
}