.card .header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;

  gap: 16px;

  font-size: 20px;

  padding-top: 8px;
  padding-bottom: 0px;

  background: transparent;
  animation: none;
  color: black;
}

.card .header .name {
  color: #2d2d2d;
  font-family: "Noto";
}

.card .header .position {
  color: #4a4a4a;
  font-family: "Noto-Light";
}

.card .image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.photo-credit {
  font-size: 13px;
  font-family: "Noto-Light";
  color: rgb(85, 85, 85);

  padding-top: 4px;
  padding-bottom: 4px;
}

/* desktop stylings */

@media only screen and (width > 760px) {
  .about-content {
    gap: 96px;
  }

  .card {
    display: flex;
    position: relative;
  }

  .card.left {
    flex-direction: row;
  }

  .card.right {
    flex-direction: row-reverse;
  }

  .card p {
    margin-top: 0px;
    margin-bottom: 16px;
  }

  .card .header {
    padding-left: 16px;
  }

  .card.left .header {
    position: absolute;
    top: 0;
    left: 0;
  }

  .card.right .header {
    position: absolute;
    top: 0;
    left: 375px;
  }

  .card .content {
    background-color: rgb(232, 248, 252);
    color: #2d2d2d;

    height: 400px;
    padding: 16px;
    margin-top: 40px;

    font-size: 14px;
  }

  .card.left .content {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    border-style: none;
  }

  .card.right .content {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    border-style: none;
  }

  .card .image img {
    height: 500px !important;
    width: 325px !important;
    max-width: 325px !important;
    max-height: 500px !important;

    object-fit: cover;

    border-radius: 16px;
  }

  .card .links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;

    background-color: rgb(232, 248, 252);
    color: #2d2d2d;

    height: 400px;
    padding: 16px;
    margin-top: 40px;

    font-size: 14px;
  }

  .card .links img {
    width: 20px;
  }

  .card.left .links {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    border-style: none;
  }

  .card.right .links {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    border-style: none;
  }
}

/* mobile sizings */

@media only screen and (width <= 760px) {
  .about-content {
    gap: 32px;
  }

  .card {
    display: flex;
    flex-direction: column;

    padding: 16px;
    margin-left: 16px;
    margin-right: 16px;
  }

  .card .header {
    order: 1;

    padding-top: 16px;
    padding-bottom: 16px;
  }

  .card .image {
    order: 2;

    object-fit: cover;

    border-radius: 16px;
  }

  .card .image img {
    border-radius: 16px;

    max-width: 325px !important;
    max-height: 325px !important;
  }

  .card .content {
    order: 3;
  }

  .card .links {
    order: 4;

    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
    gap: 32px;

    margin-right: 8px;
  }

  .card .links img {
    height: 20px;
  }
}