.res-meet-the-team {
  .container {
    .mtt-top {
      display: flex;
      gap: 24px;
      justify-content: space-between;
      margin-bottom: var(--spacing_medium);
    }

    .mtt-bottom {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 48px 24px;
      .team-member {
        .tm-image {
          position: relative;

          img {
            width: 100%;
            aspect-ratio: 1/1;
            object-fit: cover;
            object-position: top;
            border-radius: 6px;
            transition: opacity 0.3s ease;
            display: block;
          }

          .hover-img {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
          }
        }

        &:hover {
          .tm-image {
            .default-img {
              opacity: 0;
            }

            .hover-img {
              opacity: 1;
            }
          }

          .ch-bio-link {
            p {
              color: var(--res1);
            }
          }
        }
        p {
          transition: 0.3s ease;
        }
        &:hover {
          .ch-bio-link {
            p {
              color: var(--res1);
            }
          }
        }

        .tm-bottom {
          margin-top: 16px;
          display: flex;
          justify-content: space-between;
          gap: 12px;
          .mtt-name {
            font-size: var(--large_copy_size);
            font-weight: 600;
          }
          .mtt-title {
            font-size: var(--small_text_size);
            color: var(--ch-2);
          }

          .mtt-button {
            background-color: var(--res3);
            display: flex;
            aspect-ratio: 1 / 1;
            height: 37px;
            margin: auto 0;
            border-radius: 6px;
            transition: 0.3s ease;
            &:hover {
              background: #9d422a;
              transition: 0.3s ease;
            }
            svg {
              margin: auto;
              width: 20px;
              fill: white;



            }
          }
        }
      }

      @media screen and (max-width: 992px) and (min-width: 768px) {
        grid-template-columns: 1fr 1fr 1fr;
      }

      @media screen and (max-width: 767px) and (min-width: 400px) {
        grid-template-columns: 1fr 1fr;
      }

      @media screen and (max-width: 399px) {
        grid-template-columns: 1fr;
      }
    }
  }

  .mtt-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
  }

  .mtt-filters button {
    cursor: pointer;
    padding: 12px 20px;
    border: 2px solid var(--ch-2);
    color: var(--ch-2);
    border-radius: 6px;
    background: var(--ch-7);
    transition: .3s ease;
    font-family: var(--main_font);
  }

  .mtt-filters button.active {
    background: var(--ch-3);
    color: #fff;
    border-color: var(--ch-3);
  }


  /* Make team members feel clickable */
  .team-member {
    cursor: pointer;
  }


  /* Modal */
  .team-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;

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

    padding: 30px;

    visibility: hidden;
    opacity: 0;

    transition:
            opacity 0.3s ease,
            visibility 0.3s ease;
  }

  .team-modal.is-open {
    visibility: visible;
    opacity: 1;
  }


  /* Dark background */
  .team-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
  }


  /* Modal box */
  .team-modal-content {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: minmax(250px, 40%) 1fr;

    width: 100%;
    max-width: 900px;
    max-height: 90vh;

    background: #fff;

    overflow: auto;

    transform: translateY(20px);
    transition: transform 0.3s ease;
  }

  .team-modal.is-open .team-modal-content {
    transform: translateY(0);
  }


  /* Image */
  .team-modal-image {
    width: 100%;
    height: 100%;
    min-height: 400px;
  }

  .team-modal-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
  }


  /* Content */
  .team-modal-info {
    padding: 50px;
  }

  .team-modal-info h2 {
    margin: 0 0 10px;
  }

  .team-modal-title {
    margin: 0 0 30px;
  }

  .team-modal-bio {
    line-height: 1.7;
    white-space: pre-line;
  }


  /* Close button */
  .team-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;

    z-index: 2;

    width: 40px;
    height: 40px;

    border: 0;
    border-radius: 50%;

    background: #fff;

    font-size: 28px;
    line-height: 1;

    cursor: pointer;
  }


  /* Prevent page scrolling while modal is open */
  body.team-modal-open {
    overflow: hidden;
  }


  /* Mobile */
  @media (max-width: 767px) {

    .team-modal {
      padding: 15px;
    }

    .team-modal-content {
      display: block;

      max-height: 90vh;
      overflow-y: auto;
    }

    .team-modal-image {
      height: 300px;
      min-height: 0;
    }

    .team-modal-info {
      padding: 30px;
    }

  }

}