.diagram-container {
      margin: 0 auto;
      width: 50%;
    }
    
    @media screen and (max-width: 1025px) {
      .billboard.diagram {
        flex-direction: column;
      }
      .diagram-container {
        width: 100%;
      }
    }

    .billboard.diagram .billboard-content h2 {
      font-size: 2.8rem;
      font-weight: 800;
      line-height: 1.2;
      margin: 0;
      padding: 0;
      margin-bottom: 1.5rem;
      text-align: center;
    }
    .billboard.diagram .billboard-content p {
      font-size: 1.3rem;
      font-weight: 500;
      text-align: center;
      line-height: 2;
      padding: 0;
      margin: 0;
    }

    .service-diagram {
      display: flex;
      flex-direction: column;
      width: 100%;
      position: relative;
    }
    .service-diagram > .row {
      height: calc(50% - 1px);
      display: flex;
      flex-direction: column;
    }
    .row > .blurb {
      display: flex;
      align-items: center;
      padding: 0.025em;
    }
    .blurb > h3 {
      margin: 0;
      padding: 0;
      font-size: 0.05em;
    }
    h3.on-site {
      color: var(--bwj-theme-primary);
    }
    h3.off-site {
      color: var(--bwj-blue);
    }
    .blurb > p {
      margin: 0;
      padding: 0;
      font-size: 0.035em;
    }
    .row > .comic-strip {
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .diagram-arrow {
      width: 15%;
    }
    .divider {
      width: 100%;
      height: 2px;
      background-color: var(--bwj-grey);
    }
    .down-arrow {
      position: absolute;
      right: 0.2em;
      top: 0.4em;
      transform-origin: 50% 50%;
      transform: rotate(90deg);
      width: 15%;
    }