#team-members {
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center;

  .members {
    .member {
      margin: 5px;
      padding: 50px;

      .image {
        height: 250px;
        width: 250px;
        object-fit: cover;
        border-radius: 50%;
        margin-bottom: 25px;
      }

      .name {
        color: $text_inverse;
        margin-bottom: 25px;
        word-break: break-word;
      }

      .text {
        color: $text_inverse;
        word-break: break-word;

        @media screen and (max-width: 1370px) {
          font-size: 0.9rem;
          line-height: 1.565;
        }
      }

      &:nth-child(even) {
        background-color: $zim_lime;

        .btn-flat {
          background-color: $zim_green;

          &:visited,
          &:focus {
            background-color: $zim_green;
          }
        }
      }

      &:nth-child(odd) {
        background-color: $zim_green;

        .btn-flat {
          background-color: $zim_lime;

          &:visited,
          &:focus {
            background-color: $zim_lime;
          }
        }
      }

      width: calc(100% - 10px);

      @media only screen and (min-width: 1201px) {
        width: calc(33.3333333333% - 10px);
      }

      @media only screen and (min-width: $breakpoint_medium) and (max-width: $breakpoint_large) {
        width: calc(50% - 10px);
      }

      @media only screen and (max-width: 1350px) {
        min-height: 600px;
      }

      @media only screen and (min-width: 1350px) {
        min-height: 650px;
      }
    }

    .btn-flat {
      margin-top: 50px;
      text-transform: none !important;
      strong {
        font-weight: bold;
        color: white;
        line-height: inherit;
      }
    }
  }
}

@media only screen and (max-width: $breakpoint_large) {
  #team-members {
    .members {
      .member {
        &:nth-child(4n),
        &:nth-child(4n + 1) {
          background-color: $zim_lime;

          .btn-flat {
            background-color: $zim_green;

            &:visited,
            &:focus {
              background-color: $zim_green;
            }
          }
        }

        &:nth-child(4n + 2),
        &:nth-child(4n + 3) {
          background-color: $zim_green;

          .btn-flat {
            background-color: $zim_lime;

            &:visited,
            &:focus {
              background-color: $zim_lime;
            }
          }
        }
      }
    }
  }
}

@media only screen and (max-width: $breakpoint_medium) {
  #team-members {
    .members {
      .member {
        min-height: auto;
        &:nth-child(even) {
          background-color: $zim_lime;

          .btn-flat {
            background-color: $zim_green;

            &:visited,
            &:focus {
              background-color: $zim_green;
            }
          }
        }

        &:nth-child(odd) {
          background-color: $zim_green;

          .btn-flat {
            background-color: $zim_lime;

            &:visited,
            &:focus {
              background-color: $zim_lime;
            }
          }
        }
      }
    }
  }
}

.modal {
  &.team-member-modal {
    padding: 100px;

    .close {
      cursor: pointer;
      position: absolute;
      right: 10px;
      top: 10px;
    }

    @media screen and (max-width: $breakpoint_medium) {
      padding: 50px;
    }

    @media screen and (max-width: $breakpoint_small) {
      padding: 10px;
    }
  }
}