.leadership {
  /* background: linear-gradient(to top, rgba(196, 139, 98, 0.6), rgba(183, 131, 95, 0.45), rgba(183, 131, 95, 0.02)); */
}

.board-section {
  width: 100%;
  /* padding: 50px 0; */
  /* font-family: 'Gotu', sans-serif; */
}

.board-container {
  width: 100%;
  padding-block: 2rem;
}

.board-flex {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: center;
  justify-content: center;
  gap: 2rem;

  /* margin-bottom: 4rem; */
}

.board-card {
  min-width: 200px;
  /* flex: 0 0 auto; */

  color: #fff;

  text-align: center;
  place-content: center;

  position: relative;
  transition: transform 0.5s ease;
  cursor: pointer;
  user-select: none;

  display: flex;
  flex-direction: column;
  align-items: center;

  margin-bottom: 2.5rem;
}

.board-card .text {
  font-family: 'Gotu', sans-serif;
  font-size: clamp(1.2rem, 1vw, 1.6rem);
  font-weight: 700;
  color: #222;
  margin-bottom: 0.6rem !important;
}
.board-card p {
  font-size: clamp(0.8rem, 1vw, 1rem);
  font-weight: 500;
  color: #555;
}

.board-img-wrapper {
  /* flex: 1 1 20rem; */
  margin-bottom: 2rem;
  background: hsla(28, 100%, 54%, 1);

  background: linear-gradient(135deg, hsla(28, 100%, 54%, 1) 0%, rgb(253, 244, 239) 100%);

  background: -moz-linear-gradient(135deg, hsla(28, 100%, 54%, 1) 0%, rgb(252, 243, 238) 100%);

  background: -webkit-linear-gradient(135deg, hsla(28, 100%, 54%, 1) 0%, rgb(255, 243, 235) 100%);

  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#FF8215", endColorstr="#feebe0", GradientType=1 );

  border-radius: 50%;
  overflow: hidden;
  transition: all 0.8s ease;
}
/* .board-img-wrapper:hover > img {
  transform: translateY(-2rem);
} */

.avatar {
  margin-bottom: 2rem;

  --size: 220px;
  --noggin: calc(var(--size) * 0.28);
  --height-with-noggin: calc(var(--size) + var(--noggin));
  --border-width: calc(var(--size) * 0.015);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: var(--border-width) solid #fff;
  background: hsla(28, 100%, 54%, 1);

  background: linear-gradient(135deg, hsla(28, 100%, 54%, 1) 0%, rgb(253, 244, 239) 100%);

  background: -moz-linear-gradient(135deg, hsla(28, 100%, 54%, 1) 0%, rgb(252, 243, 238) 100%);

  background: -webkit-linear-gradient(135deg, hsla(28, 100%, 54%, 1) 0%, rgb(255, 243, 235) 100%);

  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#FF8215", endColorstr="#feebe0", GradientType=1 );
  /* background-color: var(--yellow);
  background-image: url('https://madcss.com/assets/dots005-CGuUpkHL.svg'); */
  display: flex;
  align-items: end;
  position: relative;
  --mask-size: calc(var(--size) / 2 - var(--border-width));
  --mask-image:
    linear-gradient(to bottom, orange 0%, orange 50%, transparent 50%),
    /* Circle cutout */
    radial-gradient(
        circle at center center,
        blue 0%,
        blue var(--mask-size),
        transparent var(--mask-size),
        transparent 100%
      );
  --mask-repeat: no-repeat, no-repeat;
  --mask-position: center center, center calc(var(--noggin) / 2 + var(--border-width));
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--height-with-noggin);
    background-image: var(--mask-image);
    background-repeat: var(--mask-repeat);
    background-position: var(--mask-position);
    opacity: 0.7;
    display: none;
  }
  img {
    width: 100%;
    height: var(--height-with-noggin);
    object-fit: cover;
    mask-image: var(--mask-image);
    mask-repeat: var(--mask-repeat);
    mask-position: var(--mask-position);
    mask-mode: alpha;
  }
}

.avatar .ceo {
  width: 20rem !important;
  /* margin-bottom: 8rem; */
}

.about-para {
  /* margin-top: 3.5rem; */
}

.about-para p {
  font-size: 1rem;
  color: #333;
}

@media (max-width: 780px) {
  .board-img-wrapper {
    /* flex: 1 1 18rem; */
  }
  .board-img-wrapper img {
    width: 180px;
  }
  .about-para p {
    text-align: center;
    padding: 1rem;
  }

  .board-card {
    margin-bottom: 3.5rem;
  }
  .avatar {
    --size: 180px;
    --noggin: calc(var(--size) * 0.18);
  }
}