#about-wrapper {
  display: flex;
  flex-direction: column;
  font-size: 1.4rem;
  line-height: 2.2rem;
}

#about-wrapper #about-me {
  /* text-align: center; */
}

#about-wrapper #title {
  text-align: center;
  font-size: 2.5em;
  color: var(--header-color);
  margin-bottom: 2rem;
  line-height: 3.42rem;
}

#about-wrapper #portrait {
  margin-bottom: 50px;
  align-self: center;
  max-width: 200px;
  border-radius: 100px;
}

#about-wrapper .benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#about-wrapper .benefit {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 300px;
  margin-top: 50px;
  padding: 20px;
}

#about-wrapper .benefit-title {
  text-align: center;
  font-size: 1.5em;
  line-height: 3.42rem;
}

#about-wrapper .benefit p {
  text-align: center;
}

#about-wrapper p a {
  color: var(--link-hover-color);
}

#about-wrapper .subtitle {
  margin-bottom: 40px;
  text-align: center;
  font-size: 2em;
  color: var(--header-color);
  line-height: 3.42rem;
  margin-top: 50px;
}

#about-wrapper .client-images-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#about-wrapper .client-image-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 187px;
  margin-top: 50px;
  margin: 20px;
}

.client-image {
  justify-self: center;
  align-self: center;
  padding: 20px;
  width: 160px;
  min-width: 160px;
  height: auto;
}

@media (prefers-color-scheme: light) {
  :root {
    --autodesk: url(/assets/images/clients/light-mode/autodesk.png);
    --travelers: url(/assets/images/clients/light-mode/travelers.png);
    --manulife: url(/assets/images/clients/light-mode/manulife.png);
    --levelup: url(/assets/images/clients/light-mode/levelup.png);
    --cybex: url(/assets/images/clients/light-mode/cybex.png);
    --qeepsake: url(/assets/images/clients/light-mode/qeepsake.png);
    --conformis: url(/assets/images/clients/light-mode/conformis.png);
    --lexshares: url(/assets/images/clients/light-mode/lexshares.png);
    --laborocity: url(/assets/images/clients/light-mode/laborocity.png);
    --ticketzen: url(/assets/images/clients/light-mode/ticketzen.png);
    --trip-zero: url(/assets/images/clients/light-mode/trip-zero.png);
    --torq: url(/assets/images/clients/light-mode/torq.png);
    --me-you-health: url(/assets/images/clients/light-mode/me-you-health.png);
    --om1: url(/assets/images/clients/light-mode/om1.png);
    --vermont-mutual: url(/assets/images/clients/light-mode/vermont-mutual.png);
    --backstop: url(/assets/images/clients/light-mode/backstop.png);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --autodesk: url(/assets/images/clients/dark-mode/autodesk.png);
    --travelers: url(/assets/images/clients/dark-mode/travelers.png);
    --manulife: url(/assets/images/clients/dark-mode/manulife.png);
    --levelup: url(/assets/images/clients/dark-mode/levelup.png);
    --cybex: url(/assets/images/clients/dark-mode/cybex.png);
    --qeepsake: url(/assets/images/clients/dark-mode/qeepsake.png);
    --conformis: url(/assets/images/clients/dark-mode/conformis.png);
    --lexshares: url(/assets/images/clients/dark-mode/lexshares.png);
    --laborocity: url(/assets/images/clients/dark-mode/laborocity.png);
    --ticketzen: url(/assets/images/clients/dark-mode/ticketzen.png);
    --trip-zero: url(/assets/images/clients/dark-mode/trip-zero.png);
    --torq: url(/assets/images/clients/dark-mode/torq.png);
    --me-you-health: url(/assets/images/clients/dark-mode/me-you-health.png);
    --om1: url(/assets/images/clients/dark-mode/om1.png);
    --vermont-mutual: url(/assets/images/clients/dark-mode/vermont-mutual.png);
    --backstop: url(/assets/images/clients/light-mode/backstop.png);
  }
}

#backstop {
  content: var(--backstop);
}

#vermont-mutual {
  content: var(--vermont-mutual);
}

#om1 {
  content: var(--om1);
}

#me-you-health {
  content: var(--me-you-health);
}

#torq {
  content: var(--torq);
}

#trip-zero {
  content: var(--trip-zero);
}

#ticketzen {
  content: var(--ticketzen);
}

#laborocity {
  content: var(--laborocity);
}

#lexshares {
  content: var(--lexshares);
}

#conformis {
  content: var(--conformis);
}

#qeepsake {
  content: var(--qeepsake);
}

#cybex {
  content: var(--cybex);
}

#levelup {
  content: var(--levelup);
}

#manulife {
  content: var(--manulife);
}

#travelers {
  content: var(--travelers);
}

#autodesk {
  content: var(--autodesk);
}