.dac-row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
clear: both;
} .test-mode {
font-family: monospace;
background: #f8f9fa;
padding: 15px;
border-left: 4px solid #0056b3;
} .members {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 20px;
}
.members table {
width: 100%;
background: #fff;
border-radius: 4px;
} .members table:hover {
box-shadow: none;
} .members.dac-col-xs-12 {
flex: 0 0 100%;
max-width: 100%;
}
@media (min-width: 576px) {
.members.dac-col-sm-6 {
flex: 0 0 50%;
max-width: 50%;
}
}
@media (min-width: 768px) {
.members.dac-col-sm-12.dac-col-md-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
}
@media (min-width: 992px) {
.members.dac-col-sm-6.dac-col-md-3.dac-col-lg-3 {
flex: 0 0 25%;
max-width: 25%;
}
} .mmpro-members.style-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
width: 100%;
padding: 1rem;
margin: 0 auto;
}
.mmpro-members.style-4 .mmpro-member-card {
display: flex;
flex-direction: row;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.2s ease-in-out;
min-height: 200px;
}
.mmpro-members.style-4 .mmpro-member-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.mmpro-members.style-4 .mmpro-card-image {
flex: 0 0 120px;
position: relative;
overflow: hidden;
}
.mmpro-members.style-4 .mmpro-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
.mmpro-members.style-4 .mmpro-card-content {
flex: 1;
padding: 1rem;
display: flex;
flex-direction: column;
} .mmpro-members.style-5 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap: 1.5rem;
width: 100%;
padding: 1rem;
margin: 0 auto;
}
.mmpro-members.style-5 .mmpro-member-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.2s ease-in-out;
height: 100%;
min-width: 270px; max-width: 300px; margin: 0 auto; }
.mmpro-members.style-5 .mmpro-member-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.mmpro-members.style-5 .mmpro-card-image {
width: 100%;
height: 0;
padding-bottom: 66.67%; position: relative;
overflow: hidden;
}
.mmpro-members.style-5 .mmpro-card-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.mmpro-members.style-5 .mmpro-card-content {
flex: 1;
padding: 1rem;
display: flex;
flex-direction: column;
} .mmpro-members.style-4 .mmpro-card-name,
.mmpro-members.style-5 .mmpro-card-name {
margin: 0 0 0.5rem;
font-size: 1.1rem;
font-weight: 600;
color: #333;
}
.mmpro-members.style-4 .mmpro-card-details,
.mmpro-members.style-5 .mmpro-card-details {
flex: 1;
}
.mmpro-members.style-4 .mmpro-card-detail,
.mmpro-members.style-5 .mmpro-card-detail {
font-size: 0.9rem;
color: #666;
margin-bottom: 0.25rem;
}
.mmpro-members.style-4 .mmpro-card-footer,
.mmpro-members.style-5 .mmpro-card-footer {
margin-top: auto;
padding-top: 0.5rem;
}
.mmpro-members.style-4 .mmpro-contact-btn,
.mmpro-members.style-5 .mmpro-contact-btn {
display: inline-block;
padding: 0.5rem 1rem;
background: #0066cc;
color: white;
text-decoration: none;
border-radius: 4px;
font-size: 0.9rem;
transition: background-color 0.2s ease;
}
.mmpro-members.style-4 .mmpro-contact-btn:hover,
.mmpro-members.style-5 .mmpro-contact-btn:hover {
background: #0052a3;
} @media (max-width: 768px) {
.mmpro-members.style-4,
.mmpro-members.style-5 {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
padding: 0.5rem;
} .mmpro-members.style-4 .mmpro-member-card {
flex-direction: column;
}
.mmpro-members.style-4 .mmpro-card-image {
flex: 0 0 200px;
}
}
@media (max-width: 480px) {
.mmpro-members.style-4,
.mmpro-members.style-5 {
grid-template-columns: 1fr;
}
} .iframe3 {
max-width: 100%;
} .mmpro-debug {
background: #f8f9fa;
border-left: 4px solid #0056b3;
padding: 1rem;
margin-bottom: 1rem;
font-family: monospace;
overflow-x: auto;
}
.mmpro-error {
background: #fff3f3;
border-left: 4px solid #dc3545;
padding: 1rem;
margin-bottom: 1rem;
color: #dc3545;
}
.mmpro-error i {
margin-right: 0.5rem;
}