.customer-styles {
  /* START article: personal-approach */
  /* END article: personal-approach */
}

.customer-styles .template_personal-approach.template_personal-approach {
  z-index: 0;
}

.customer-styles .template_personal-approach .border-container {
  align-items: start;
  display: grid;
  grid-column: 1 / 7;
  grid-column-gap: calc(10 * var(--font-size));
  grid-row-gap: calc(46 * var(--font-size, 1px));
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding-block: 50px;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .customer-styles .template_personal-approach .border-container {
    grid-column: 3 / 15;
    grid-row-gap: 0;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.customer-styles .template_personal-approach .border-container::before {
  border: var(--font-size) solid rgba(255, 255, 255, 0.5);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.customer-styles .template_personal-approach .border-container::after {
  background-color: #fbba00;
  content: '';
  height: calc(100% - 50 * var(--font-size));
  position: absolute;
  right: 0;
  top: 0;
  width: calc(15 * var(--font-size));
  z-index: 2;
}

@media (min-width: 768px) {
  .customer-styles .template_personal-approach .border-container::after {
    width: 10px;
  }
}

.customer-styles .template_personal-approach .glow {
  aspect-ratio: 5 / 3;
  background: radial-gradient(circle, rgba(0, 47, 175, 0.8) 0%, rgba(0, 0, 0, 0) 50%);
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 85%;
  transform: translate(-50%, -50%);
  width: 200%;
  z-index: -1;
}

@media (min-width: 768px) {
  .customer-styles .template_personal-approach .glow {
    left: 70%;
    top: 50%;
    width: 100%;
  }
}

.customer-styles .template_personal-approach .h3-container {
  grid-column: 1 / 7;
  margin: 0 calc(37 * var(--font-size)) 0 calc(22 * var(--font-size));
}

@media (min-width: 768px) {
  .customer-styles .template_personal-approach .h3-container {
    grid-column: 1 / 13;
    margin: 0 calc(60 * var(--font-size)) 1em 50px;
  }
}

.customer-styles .template_personal-approach .left-container {
  grid-column: 1 / 7;
  margin-left: calc(22 * var(--font-size));
  margin-right: calc(37 * var(--font-size));
}

@media (min-width: 768px) {
  .customer-styles .template_personal-approach .left-container {
    grid-column: 1 / 9;
    margin-left: 50px;
    margin-right: 0;
  }
}

.customer-styles .template_personal-approach .right-container {
  display: grid;
  grid-column: 1 / 7;
  grid-row-gap: calc(42 * var(--font-size));
  margin-left: calc(22 * var(--font-size));
  margin-right: calc(22 * var(--font-size));
  margin-top: 20px;
}

@media (min-width: 768px) {
  .customer-styles .template_personal-approach .right-container {
    grid-column: 10 / 13;
    grid-row-gap: calc(30 * var(--font-size));
    margin-left: 0;
    margin-right: calc(60 * var(--font-size));
    margin-top: 0;
  }
}

.customer-styles .template_personal-approach .mobile-text-center {
  text-align: center;
}

@media (min-width: 768px) {
  .customer-styles .template_personal-approach .mobile-text-center {
    text-align: left;
  }
}

.customer-styles .template_personal-approach .image-container {
  border-radius: 50%;
  height: calc(165 * var(--font-size));
  justify-self: center;
  overflow: clip;
  width: calc(165 * var(--font-size));
}

@media (min-width: 768px) {
  .customer-styles .template_personal-approach .image-container {
    height: calc(110 * var(--font-size));
    width: calc(110 * var(--font-size));
  }
}

.customer-styles .template_personal-approach .image-container .image {
  width: 100%;
}

.customer-styles .template_personal-approach .button-container {
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  .customer-styles .template_personal-approach .button-container {
    justify-content: left;
  }
}