/* ================== CSS Reset for WordPress Compatibility ================== */
.its-pilih-layanan-page * {
box-sizing: border-box !important;
}
body.its-pilih-layanan-page .grid-container,
.its-pilih-layanan-page .grid-container {
display: flex !important;
flex-wrap: wrap !important;
gap: 32px !important;
text-align: center !important;
justify-content: center !important;
align-items: center !important;
margin-inline: 32px !important;
perspective: 1000px !important;
border-radius: 8px !important;
}
body.its-pilih-layanan-page .grid-container2,
.its-pilih-layanan-page .grid-container2 {
display: flex !important;
flex-wrap: wrap !important;
gap: 32px !important;
text-align: center !important;
justify-content: center !important;
align-items: center !important;
margin-inline: 32px !important;
perspective: 1000px !important;
border-radius: 8px !important;
}
body.its-pilih-layanan-page .grid-item,
.its-pilih-layanan-page .grid-item {
position: relative !important;
flex: 1 1 300px !important;
min-width: 250px !important;
max-width: 400px !important;
height: 288px !important;
overflow: hidden !important;
border-radius: 8px !important;
}
body.its-pilih-layanan-page .grid-item img,
.its-pilih-layanan-page .grid-item img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 8px !important;
cursor: pointer !important;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
transition: transform 0.5s ease, box-shadow 0.5s ease !important;
}
body.its-pilih-layanan-page .grid-item:hover img,
.its-pilih-layanan-page .grid-item:hover img {
transform: scale(1.1) rotate3d(1, 1, 0, 10deg) !important;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
}
body.its-pilih-layanan-page .grid-item .overlay,
.its-pilih-layanan-page .grid-item .overlay {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)) !important;
color: white !important;
padding: 10px !important;
text-align: center !important;
font-size: 24px !important;
font-family: 'AvenirNextLTPro-Bold', Arial, sans-serif !important;
border-radius: 0 0 8px 8px !important;
}
body.its-pilih-layanan-page .empty-32,
.its-pilih-layanan-page .empty-32 {
height: 32px !important;
width: 100% !important;
display: block !important;
}
/* ================== Responsive Design ================== */
@media (max-width: 1024px) {
body.its-pilih-layanan-page .grid-container,
.its-pilih-layanan-page .grid-container {
gap: 24px !important;
margin-inline: 24px !important;
}
body.its-pilih-layanan-page .grid-container2,
.its-pilih-layanan-page .grid-container2 {
gap: 24px !important;
margin-inline: 24px !important;
}
body.its-pilih-layanan-page .grid-item,
.its-pilih-layanan-page .grid-item {
flex: 1 1 280px !important;
min-width: 220px !important;
}
}
@media (max-width: 768px) {
body.its-pilih-layanan-page .grid-container,
.its-pilih-layanan-page .grid-container {
gap: 20px !important;
margin-inline: 20px !important;
}
body.its-pilih-layanan-page .grid-container2,
.its-pilih-layanan-page .grid-container2 {
gap: 20px !important;
margin-inline: 20px !important;
}
body.its-pilih-layanan-page .grid-item,
.its-pilih-layanan-page .grid-item {
flex: 1 1 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: 240px !important;
}
body.its-pilih-layanan-page .grid-item .overlay,
.its-pilih-layanan-page .grid-item .overlay {
font-size: 20px !important;
}
}
@media (max-width: 480px) {
body.its-pilih-layanan-page .grid-container,
.its-pilih-layanan-page .grid-container {
gap: 16px !important;
margin-inline: 16px !important;
}
body.its-pilih-layanan-page .grid-container2,
.its-pilih-layanan-page .grid-container2 {
gap: 16px !important;
margin-inline: 16px !important;
}
body.its-pilih-layanan-page .grid-item,
.its-pilih-layanan-page .grid-item {
height: 200px !important;
}
body.its-pilih-layanan-page .grid-item .overlay,
.its-pilih-layanan-page .grid-item .overlay {
font-size: 18px !important;
padding: 8px !important;
}
}
