:root {
    --card-width: 200px; /* 3 cards per row on large screens */
    --card-padding: 15px;
    --card-border-radius: 10px;
    --photo-width: 100%; /* Ensure photo takes full width of its container */
    --photo-height: auto;
}

.dentist-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 90%; /* Adjust as needed */
  margin: 0 auto; /* Center horizontally */
  justify-items: center; /* Center the image horizontally */
  align-items: center;
  justify-content: space-evenly;
}

/* Styles for dentist cards */
.dentist-container .dentist-card {
  background-color: #f9f9f9; /* Light grey background */
  border: 0px solid #ccc; /* Light border */
  border-radius: var(--card-border-radius); /* Rounded corners */
  box-shadow: 10px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  padding: var(--card-padding);
  margin-bottom: 20px; /* Space at the bottom of each card */
  margin-left: 0px; /* Adjust this value to control the horizontal spacing */
  margin-right: 0px; /* Adjust this value to control the horizontal spacing */
  box-sizing: border-box;
  font-size: var(--font_size_text_desktop); /* Dynamic font size */
  width: calc(300px + 3vw);/* 450px; */
  height: 800px;
  /* Ensure images within cards are responsive */
  overflow: hidden; /* Prevent overflow of images */
}

.dentist-container .dentist-card img {
  width: 100%; /* Make images responsive to card width */
  height: auto; /* Maintain aspect ratio */
}

.dentist-card:hover {
/*    transform: translateY(-5px); */
}

.circle-border {
    display: block;
    margin: 0 auto; /* Center the image */
    border-radius: 50%;
    overflow: hidden;
    width: var(--photo-width);
    height: var(--photo-height);
    border: 8px solid; /* Border settings */
    border-color: var(--photo_border_color);
}

.circle-border img {
    display: block;
    width: 100%;
    height: auto; /* Keep aspect ratio */
}

/* Intermediate browser width (max-width: 1400px) */
@media (max-width: 1400px) {
  .dentist-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Responsive design for tablets and mobile devices */

/* Tablet (max-width: 768px) */
@media (max-width: 768px) {
  .dentist-container {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
  }

  .dentist-container .dentist-card {
    font-size: var(--font_size_text_iPad); /* Responsive font size for tablets */
    width: calc(300px + 1vw);/* 450px; */

  }

  .dentist-card img {
    width: 100%; /* Ensure images are responsive on tablets */
  }
}

/* Mobile (max-width: 480px) */
@media (max-width: 480px) {
  .dentist-container {
    grid-template-columns: 1fr; /* 1 column on mobile devices */
  }

  .dentist-container .dentist-card {
    font-size: var(--font_size_text_iPhone); /* Responsive font size for mobile */
  }

  .dentist-container .dentist-card img {
    width: 100%; /* Ensure images are responsive on mobile devices */
  }
}