.meu-carousel-slider-wrapper {
position: relative; width: 100%;
overflow: hidden; } .meu-carousel-slider { }
.meu-carousel-slide-item {
width: 100%; position: relative; line-height: 0; }
.meu-carousel-slide-item img {
width: 100%; height: auto; display: block; } .meu-carousel-slide-item .carousel-img-mobile {
display: none;
}
.meu-carousel-slide-item .carousel-img-desktop {
display: block;
} @media (max-width: 768px) {
.meu-carousel-slide-item .carousel-img-desktop {
display: none; }
.meu-carousel-slide-item .carousel-img-mobile {
display: block; }
} .meu-carousel-nav button {
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
font-size: 14px;
margin: 0 5px;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.meu-carousel-nav button:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.meu-carousel-nav button:disabled {
opacity: 0.5;
cursor: not-allowed;
} .tns-nav {
position: absolute; bottom: 15px; left: 0; right: 0; text-align: center; z-index: 10; line-height: 1; } .tns-nav button {
width: 12px; height: 12px; background-color: rgba(255, 255, 255, 0.5); border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 50%; padding: 0;
margin: 0 5px; cursor: pointer;
transition: background-color 0.3s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .tns-nav button.tns-nav-active {
background-color: rgba(255, 255, 255, 1); border-color: rgba(0, 0, 0, 0.4);
}    .meu-carousel-slide-item img {
width: 100%;
height: auto;
display: block;
}
.meu-carousel-slide-item .carousel-img-mobile {
display: none;
}
.meu-carousel-slide-item .carousel-img-desktop {
display: block;
}
@media (max-width: 768px) {
.meu-carousel-slide-item .carousel-img-desktop {
display: none;
}
.meu-carousel-slide-item .carousel-img-mobile {
display: block;
}  }   :root {
--svg-icon-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 19.5L8.25 12l7.5-7.5' /%3E%3C/svg%3E");
--svg-icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8.25 4.5l7.5 7.5-7.5 7.5' /%3E%3C/svg%3E");
}
.meu-carousel-nav button {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background-color: white; border: none;
border-radius: 50%;
width: 40px; height: 40px;
padding: 0;
cursor: pointer;
transition: background-color 0.3s ease, opacity 0.3s ease;  -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: 50%; mask-size: 50%;   background-clip: padding-box; background-origin: padding-box;
background-color: rgba(0, 0, 0, 0.4);    } .meu-carousel-nav button {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
border: none;
border-radius: 50%;
width: 45px;
height: 45px;
padding: 0;
cursor: pointer;
transition: background-color 0.3s ease, opacity 0.3s ease;
background-color: rgba(0, 0, 0, 0.4);  -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: 50%; mask-size: 50%;   } .meu-carousel-nav button {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background-color: rgba(0, 0, 0, 0.4); color: white; border: none;
border-radius: 50%;
width: 45px;
height: 45px;
padding: 0;
cursor: pointer;
transition: background-color 0.3s ease, opacity 0.3s ease;
overflow: hidden; }
.meu-carousel-nav button::before { content: '';
display: block;
width: 100%;
height: 100%;
background-color: white; -webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: 50%; mask-size: 50%;
} .meu-carousel-nav button.prev::before {
-webkit-mask-image: var(--svg-icon-chevron-left);
mask-image: var(--svg-icon-chevron-left);
}
.meu-carousel-nav button.next::before {
-webkit-mask-image: var(--svg-icon-chevron-right);
mask-image: var(--svg-icon-chevron-right);
} .meu-carousel-nav button.prev {
left: 15px;
}
.meu-carousel-nav button.next {
right: 15px;
} .meu-carousel-nav button:hover {
background-color: rgba(0, 0, 0, 0.7);
}   .meu-carousel-nav button:disabled {
opacity: 0.3;
cursor: not-allowed;
background-color: rgba(0, 0, 0, 0.2); }