.custom-advisors {
  padding: 10vw 5vw;
  background-color: var(--foe-color-four);
  position: relative;
}

.image-cols,
.text-cols {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0 5vw;
}

.custom-advisors img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 20px;
  margin: 2.5vw 0;
}

.custom-advisors h3,
.custom-advisors p,
.custom-advisors li,
.custom-advisors a {
  color: var(--foe-color-six);
}

.custom-advisors h3 {
  padding: 5vw 5vw 2.5vw;
  border-bottom: 1px solid var(--foe-color-two);
  margin-bottom: 2.5vw;
}

.text-cols p {
  margin: 0 0 25px;
}

.custom-advisors .button-container {
  display: flex;
  justify-content: center;
}

.custom-advisors .button {
  background-color: var(--foe-color-one);
  border-color: var(--foe-color-one);
  color: var(--foe-color-four);
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.custom-advisors .button:hover .custom-advisors .button:focus .custom-advisors .button:active {
  background-color: var(--foe-color-two);
  border-color: var(--foe-color-two);
  color: var(--foe-color-four);
}

/**    ███  ██████████  ██████████     ██████████  ███    ███
███    ███  ███    ███  ███    ███     ███    ███   ███  ███
███    ███  ███    ███  ███    ███     ███    ███     ████
██████████  ██████████  ███    ███     ██████████      ██
       ███  ███    ███  ███    ███     ███            ████
       ███  ███    ███  ███    ███     ███          ███  ███
       ███  ██████████  ██████████     ███         ███    █*/

@media only screen and (min-width: 480px) {
}

/**███████  ███         ██████████     ██████████  ███    ███
       ███  ███         ███    ███     ███    ███   ███  ███
       ███  ███         ███    ███     ███    ███     ████
    ██████  ██████████  ██████████     ██████████      ██
       ███  ███    ███  ███    ███     ███            ████
       ███  ███    ███  ███    ███     ███          ███  ███
       ███  ██████████  ██████████     ███         ███    █*/

@media only screen and (min-width: 768px) {
  .custom-advisors .image-cols {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 25px;
  }
}

/**  ██████████  ██████████  ███    ███     ██████████  ███    ███
███  ███    ███         ███  ███    ███     ███    ███   ███  ███
███  ███    ███         ███  ███    ███     ███    ███     ████
███  ███    ███  ██████████  ██████████     ██████████      ██
███  ███    ███  ███                ███     ███            ████
███  ███    ███  ███                ███     ███          ███  ███
███  ██████████  ██████████         ███     ███         ███    █*/

@media only screen and (min-width: 1024px) {
  .custom-advisors h3 {
    text-align: center;
  }

  .custom-advisors .text-cols {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 25px;
  }

  .custom-advisors .text-cols .column p {
    text-align: center;
  }
}

/**  ███    ███  ███    ███  ██████████     ██████████  ███    ███
███  ███    ███  ███    ███  ███    ███     ███    ███   ███  ███
███  ███    ███  ███    ███  ███    ███     ███    ███     ████
███  ██████████  ██████████  ███    ███     ██████████      ██
███         ███         ███  ███    ███     ███            ████
███         ███         ███  ███    ███     ███          ███  ███
███         ███         ███  ██████████     ███         ███    █*/

@media only screen and (min-width: 1366px) {
  .custom-advisors {
    padding: 5vw 10vw;
  }

  .custom-advisors .image-cols,
  .custom-advisors .text-cols {
    column-gap: 5vw;
  }

  .custom-advisors h3 {
    padding: 2.5vw 0 2.5vw;
  }
}