table.responsive-table {
  width: 100% !important;
  border-collapse: collapse !important;
}

table.responsive-table th,
table.responsive-table td {
  padding: 10px !important;
  text-align: left !important;
  vertical-align: top !important;
}

table.responsive-table thead th {
  background: #dddddd !important;
}

table.responsive-table tbody tr:nth-child(odd) {
  background-color: #ffffff !important;
}

table.responsive-table tbody tr:nth-child(even) {
  background-color: #f5f5f5 !important;
}

table.responsive-table a {
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 600px) {
  table.responsive-table,
  table.responsive-table thead,
  table.responsive-table tbody,
  table.responsive-table th,
  table.responsive-table td,
  table.responsive-table tr {
    display: block;
    width: 100%;
  }

  table.responsive-table thead {
    display: none;
  }

  table.responsive-table tr {
    margin-bottom: 12px;
    border: 1px solid #ddd;
  }

  table.responsive-table td {
    border: none;
    padding: 8px 10px !important;
  }

  table.responsive-table td::before {
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
  }

  table.responsive-table td:nth-child(1)::before { content: "Role"; }
  table.responsive-table td:nth-child(2)::before { content: "Name"; }
  table.responsive-table td:nth-child(3)::before { content: "Contact"; }
}


/* GRID SPACING */
.image-grid-3 {
  margin-left: -10px;
  margin-right: -10px;
}

.image-grid-3 .grid-item {
  padding: 10px;
}

/* IMAGE WRAPPER (controls height + crop) */
.image-grid-3 .grid-img-wrap {
  width: 100%;
  height: 260px; /* 🔧 adjust height here */
  overflow: hidden;
  border-radius: 8px;
  position: relative;
}

/* IMAGE BEHAVIOR */
.image-grid-3 .grid-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.3s ease;
}

/* HOVER EFFECT */
.image-grid-3 .grid-img-wrap:hover .grid-img {
  transform: scale(1.08);
  filter: brightness(0.9);
}

/* OPTIONAL: subtle shadow on hover */
.image-grid-3 .grid-img-wrap:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.image-grid-3 {
  margin-left: -10px;
  margin-right: -10px;
}

.image-grid-3 .grid-item {
  padding: 10px;
}

.image-grid-3 .grid-img-wrap {
  width: 100%;
  height: 260px;
  overflow: hidden;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  transition: box-shadow 0.3s ease;
}

.image-grid-3 .grid-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, filter 0.3s ease;
}

.image-grid-3 .grid-img-wrap:hover .grid-img {
  transform: scale(1.08);
  filter: brightness(0.92);
}

.image-grid-3 .grid-img-wrap:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.16);
}

span.field-value {
  display: block;
  column-count: 3;
  column-gap: 20px;
}

span.field-value img.myimagegrid {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 20px 0;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  transition: transform 0.35s ease, filter 0.35s ease, box-shadow 0.35s ease;
}

span.field-value img.myimagegrid:hover {
  transform: scale(1.02);
  filter: brightness(0.94);
  box-shadow: 0 8px 20px rgba(0,0,0,0.16);
}

@media (max-width: 991px) {
  span.field-value {
    column-count: 2;
  }
}

@media (max-width: 575px) {
  span.field-value {
    column-count: 1;
  }
}