.group.meet_the_team-group {
  .row.meet_the_team-row {
    display: flex;
    justify-content: center;

    .meet_the_team {
      display: flex;

      @include breakpoint(mobile) {
        flex-direction: column;
      }

      @include breakpoint(tablet) {
        flex-flow: row wrap;
        justify-content: space-between;
      }

      width: 100%;
      max-width: calculateRem(1200);

      .card {
        margin-bottom: calculateRem(30);

        @include breakpoint(tablet) {
          width: calc(50% - 25px);
        }

        @include breakpoint(laptop) {
          width: calc(33.3333333% - 25px);
        }

        &:last-child {
          @include breakpoint(mobile) {
            margin-bottom: 0;
          }
        }

        &:nth-last-child(-n+2) {
          @include breakpoint(tablet) {
            margin-bottom: 0;
          }
        }

        &:nth-last-child(-n+3) {
          @include breakpoint(laptop) {
            margin-bottom: 0;
          }
        }

        &.title-card {
          display: flex;
          justify-content: center;

          padding-top: calculateRem(40);
          padding-right: calculateRem(40);
          padding-bottom: calculateRem(40);
          padding-left: calculateRem(40);

          .title-subtitle-paragraph {
            h3.subtitle {
              color: inherit;
            }

            p.paragraph {
              margin-bottom: 0;
            }
          }
        }

        &.no-bio {
          .main {
            .caption {
              .icon-container {
                display: none;
              }
            }
          }
        }

        &:not(.title-card) {
          &:hover {
            .bio {
              display: flex;
              align-items: safe center;
            }
          }

          &.hover-primary {
            .bio {
              background-color: $primary-color;
              color: setTextColor($primary-color);
            }
          }

          &.hover-secondary {
            .bio {
              background-color: $secondary-color;
              color: setTextColor($secondary-color);
            }
          }

          &.hover-tertiary {
            .bio {
              background-color: $tertiary-color;
              color: setTextColor($tertiary-color);
            }
          }

          &.hover-light {
            .bio {
              background-color: $light;
              color: $dark;
            }
          }

          &.hover-dark {
            .bio {
              background-color: $dark;
              color: $light;
            }
          }

          .main {
            .caption {
              position: absolute;
              bottom: 0;

              width: 100%;

              padding-top: calculateRem(10);
              padding-right: calculateRem(30);
              padding-bottom: calculateRem(10);
              padding-left: calculateRem(30);

              background-color: $mid-gray;
              color: $light;

              @include breakpoint(mobile) {
                display: flex;
                justify-content: space-between;
              }

              @include breakpoint(laptop) {
                display: block;
                justify-content: normal;
              }

              .name-job {
                @include breakpoint(laptop) {
                  text-align: center;
                }

                .name {
                  text-transform: uppercase;
                  font-weight: 700;
                }
              }

              .icon-container {
                align-self: center;

                @include breakpoint(laptop) {
                  display: none;
                }
              }
            }
          }

          .bio {
            display: none;

            position: absolute;
            top: 0;
            left: 0;

            width: 100%;
            height: 100%;

            padding-top: calculateRem(20);
            padding-right: calculateRem(30);
            padding-bottom: calculateRem(20);
            padding-left: calculateRem(30);

            text-align: center;

            overflow-y: auto;

            .text {
              width: 100%;

              margin: auto;

              p {
                &:last-child {
                  margin-bottom: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}
