{% scope_css %}
/* ... Your existing styles ... */

.team-member img {
  width: 300px;
  display: block;
  height: 300px;
  object-fit:cover;
  transition: filter 0.3s ease, transform 0.3s ease; /* Smooth transition for filter and transform */
  filter: grayscale(100%);
  position: relative;
}

.team-member:hover img {
  filter: grayscale(0); /* Revert to full color on hover */
  transform: scale(1.05); /* Scale the image up */
}

.member-info .name{
  font-weight: bold;
  font-size: 20px;
  white-space: normal; /* Allows the text to wrap */
  overflow: visible; /* Shows overflow */
  text-overflow: clip; /* Removes the ellipsis */
  margin-left:  10px;
  margin-right: 10px;
  margin-bottom: 18px;
}

.member-info .job-title {
  white-space: normal; /* Allows the text to wrap */
  overflow: visible; /* Shows overflow */
  text-overflow: clip; /* Removes the ellipsis */
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10;
  width: 300px; /* Set to match the image width */
  position: relative;
  cursor: pointer;
  padding: 10px;
  overflow: hidden;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300pxe, 1fr)); /* Creates a 4-column layout */
  gap: 15px;
  justify-content: center;
  align-items: center;
}

/* Ensure .member-info is the same width as the image above it */
.member-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.1); /* Adjust the opacity to make text readable on image */
  color: white;
  display: none; /* Hide by default */
  text-align: left;
  width: 100%;/* Match the width of the team-member */
}

.team-member:hover .member-info {
  display: block; /* Show on hover */
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #f2f8ff;
  margin: 10% auto;
  padding: 40px;
  border: 1px solid #888;
  width: 75%;
  overflow: hidden;
  border-radius: 30px;
  text-align: justify;
}

.modal-header {
  display: flex;
  text-align: left
  align-items: center;
  gap: 20px;/* This creates space between the image and the text */
}

.modal-header img{
  max-width: 250px;
  height: auto;
  border-radius: 30px;
  border: 4px solid #2764ff;
}
  
.modal-job-title {
  color: #2764ff; /* Blue color for job title in the modal */
}
.linkedin {
  color: #2764ff;
}

.member-image {
  width: 100%;
  max-width: 300px;
  cursor: pointer;
}

/* Add more styling as necessary */


.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

{% end_scope_css %}

@media (max-width: 767px) {
  .team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns for mobile */
    gap: 20px; /* Adjust gap for space between team members */
    justify-content: center;
    align-items: start;
  }

  .team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    width: auto; /* Auto width for responsiveness */
    cursor: pointer;
    overflow: visible;
  }

  .team-member img {
    width: 150px; /* Responsive width */
    height: 150px; /* Maintain aspect ratio */
    object-fit: cover; /* Ensure images cover their area properly */
    filter: none; /* Remove grayscale effect */
  }

  .member-info {
    position: static;
    display: flex; /* Display the member info as a block element */
    flex-direction: column;
    text-align: center; /* Center-align the text */
    color: black; /* Text color for the name */
    background: transparent; /* No background */
    width: 100%; /* Full width of the container */
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .member-info .name {
    display: flex;
    flex-direction: column;
    font-weight: bold;
    line-height: 1.5;
    font-size: 1em; /* Adjust font size as needed */
    margin: 0; /* No additional margin around the name */
  }

  .member-info .job-title {
    display: none; /* Hide the job title on mobile */
  }

 .modal-content {
    background-color: #f2f8ff; /* White background for the modal */
    margin: 10% auto; /* Center the modal on the screen */
    padding: 20px; /* Padding inside the modal */
    border-radius: 10px; /* Rounded corners for the modal */
    width: 90%; /* Width of the modal as a percentage of screen width */
  }

  .modal-header {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center-align items */
    margin-bottom: 20px; /* Space between header and content */
  }

  .modal-header img {
    border-radius: 50%; /* Make the image round */
    width: 120px; /* Fixed width for the image */
    height: 120px; /* Fixed height for the image */
    object-fit: cover; /* Ensure image covers the area */
    margin-bottom: 10px; /* Space below the image */
  }

  .modal-header h2, 
  .modal-header {
    text-align: center; /* Center-align text */
    color: black; /* Text color */
    margin: 5px 0; /* Margin for spacing */
  }

.modal-job-title {
    text-align: center; /* Center-align text */
    color: #2764ff; /* Text color */
    margin: 5px 0; /* Margin for spacing */
  }

  .modal-body {
    text-align: left; /* Align text to the left */
  }

  .linkedin {
    display: block; /* LinkedIn link on its own line */
    color: #2764ff; /* Color for the LinkedIn link */
    text-decoration: none; /* No underline */
    margin-top: 15px; /* Space above the LinkedIn link */
  }

  .linkedin:empty {
    display: none; /* Hide if there's no content */
  }

  .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5rem; /* Close icon size */
    color: #2764FF; /* Close icon color */
    cursor: pointer;
  }

  .close:hover,
  .close:focus {
    color: #2764ff; /* Highlight color on hover/focus */
  }

  /* Remove grayscale filter from images */
  .team-member img {
    filter: none;
  }

  /* Remove scaling effect on hover */
  .team-member:hover img {
    transform: none;
  }
}
/* Non-mobile styles, for larger screens */
@media (min-width: 768px) {
  /* Your existing styles for non-mobile screens */
  .team-grid {
    grid-template-columns: repeat(4, auto); /* Adjust number of columns as needed */
    /* Other styling for team grid */
  }
.close {
  }