@media (max-width: 767px) {
.nopal-hero {
position: relative;
min-height: 67svh !important;
padding: 0 !important;
overflow: hidden;
} .nopal-hero .elementor-widget-video {
position: absolute !important;
inset: 0;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
} .nopal-hero .elementor-widget-video .elementor-widget-container,
.nopal-hero .elementor-widget-video .elementor-wrapper {
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
aspect-ratio: auto !important;
} .nopal-hero .elementor-widget-video video,
.nopal-hero video.elementor-video {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: 80% center;
}
} .nopal-proyecto-card{
position: relative;
width: 100%;
overflow: hidden;
} .nopal-img-desktop{
display: block;
}
.nopal-img-mobile{
display: none;
} .nopal-proyecto-card .elementor-widget-image{
width: 100%;
margin: 0;
overflow: hidden;
}
.nopal-proyecto-card .elementor-widget-image img{
display: block;
width: 100%;
transition:
filter .35s ease,
transform .5s ease;
} .nopal-proyecto-card:hover .elementor-widget-image img{
filter: brightness(.65);
} .nopal-proyecto-info{
position: absolute;
top: 22px;
left: 20px;
z-index: 10;
pointer-events: none;
}
.nopal-proyecto-info .elementor-heading-title,
.nopal-proyecto-info p{
transition: color .35s ease;
}
.nopal-proyecto-card:hover .nopal-proyecto-info .elementor-heading-title,
.nopal-proyecto-card:hover .nopal-proyecto-info p{
color: #BCBCBC !important;
} .nopal-proyecto-card:nth-child(3) .elementor-widget-image img{
filter: blur(4px);
transform: scale(1.03);
}
.nopal-proyecto-card:nth-child(3):hover .elementor-widget-image img{
filter: blur(4px) brightness(.65);
} @media (max-width:767px){
.nopal-proyectos-grid{
display:grid;
grid-template-columns:1fr;
gap:24px;
}
.nopal-proyecto-card{
width:100%;
}
.nopal-img-desktop{
display:none !important;
}
.nopal-img-mobile{
display:block !important;
}
.nopal-img-mobile,
.nopal-img-mobile .elementor-widget-container{
width:100%;
height:200px;
overflow:hidden;
}
.nopal-img-mobile img{
display:block;
width:100% !important;
height:200px !important;
object-fit:cover;
object-position:center;
}
.nopal-proyecto-info{
top:18px;
left:18px;
}
.nopal-proyecto-info .elementor-heading-title{
font-size:18px;
}
.nopal-proyecto-info p{
margin-top:3px;
font-size:14px;
}
}