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

    .meet_the_team {
      width: 100%;
      max-width: calculateRem(1200);

      .title-subtitle-paragraph {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .members-container {
        display: flex;
        justify-content: center;

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

        @include breakpoint(tablet) {
          flex-flow: row wrap;
        }

        .member {
          cursor: pointer;

          @include breakpoint(tablet) {
            width: calc(33.333333% - 20px);
          }

          @include breakpoint(laptop) {
            width: calc(20% - 24px);
          }

          &:not(:first-child) {
            @include breakpoint(mobile) {
              margin-top: calculateRem(30);
            }

            @include breakpoint(tablet) {
              margin-top: 0;
            }
          }

          &:not(:nth-child(3n)) {
            @include breakpoint(tablet) {
              margin-right: calculateRem(30);
            }
            @include breakpoint(laptop) {
              margin-right: 0;
            }
          }

          &:not(:nth-child(5n)) {
            @include breakpoint(laptop) {
              margin-right: calculateRem(30);
            }
          }

          &:nth-child(n + 4) {
            @include breakpoint(tablet) {
              margin-top: calculateRem(30);
            }
            @include breakpoint(laptop) {
              margin-top: 0;
            }
          }

          &:nth-child(n + 6) {
            @include breakpoint(laptop) {
              margin-top: calculateRem(30);
            }
          }

          .image-icon-link {
            position: relative;

            &:hover {
              .image-container {
                .image {
                  filter: grayscale(0);
                }
              }
            }

            .image-container {
              .image {
                padding-top: 167%;

                background-position: center;
                background-size: cover;

                filter: grayscale(1);

                transition: all 0.5s ease;
              }
            }

            .icon-link-container {
              position: absolute;
              bottom: 0;
              right: 0;
              left: 0;

              .relative-container {
                display: flex;
                justify-content: flex-end;

                @include breakpoint(mobile) {
                  height: calculateRem(75);
                  @include angle-edge(5, 'top', 'left');
                }

                @include breakpoint(tablet) {
                  height: calculateRem(80);
                  @include angle-edge(1.5, 'top', 'left');
                }

                a {
                  min-height: calculateRem(26);

                  i {
                    position: absolute;
                    right: calculateRem(15);
                    bottom: calculateRem(20);
                    font-size: 32px;
                  }
                }
              }
            }
          }

          .name-position {
            margin-top: calculateRem(10);

            .name {
              margin-bottom: calculateRem(6);
              font-size: $font-size-multiplier * 18px;
              line-height: normal;
            }

            .position {
              font-size: $font-size-multiplier * 14px;
              line-height: normal;
            }
          }
        }
      }
    }

    .member-modal-container {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 99;

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

      width: 100vw;
      height: 100vh;

      background-color: rgba(0, 0, 0, 0.5);

      .member-modal {
        position: relative;

        display: flex;

        box-shadow: 0 3.5px 6px 0 rgba(0, 0, 0, 0.5);

        @include breakpoint(mobile) {
          width: calc(100vw - 50px);
        }

        @include breakpoint(tablet) {
          width: 50vw;
          min-width: calculateRem(350);
          max-width: calculateRem(800);
        }

        .close-icon-container {
          position: absolute;
          top: calculateRem(20);
          right: calculateRem(15);

          padding: calculateRem(4);

          line-height: 0;

          cursor: pointer;

          i {
            font-size: 18px;
            line-height: 0;
          }
        }

        .image-container {
          width: 30%;
          margin: calculateRem(20) 0 calculateRem(20) calculateRem(20);

          & + .content-container {
            margin-left: calculateRem(15);
          }

          img {
            width: 100%;
          }
        }

        .content-container {
          flex-grow: 1;
          margin: calculateRem(20);

          .name {
            margin-bottom: calculateRem(10);

            & + .position + .bio,
            & + .bio {
              margin-top: calculateRem(30);
            }
          }
        }
      }
    }
  }
}
