.myew-slider {
position: relative;
width: 100%;
overflow: hidden;
}
.myew-slider__viewport { overflow-x: auto;
overflow-y: hidden;
width: 100%;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch; scrollbar-width: none; }
.myew-slider__viewport::-webkit-scrollbar { display: none; } .myew-slider__track {
display: flex;
align-items: stretch;
gap: 16px; }
.myew-slide { flex: 0 0 100%;
box-sizing: border-box;
scroll-snap-align: start;
}
.myew-slide__grid {
display: grid;
gap: 16px;
align-items: start;
grid-template-columns: 1fr;
grid-template-areas:
"media"
"title"
"price"
"text"
"list"
"button"
"caption";
}
.myew-slide__media { grid-area: media; }
.myew-slide__title { grid-area: title; margin: 0; font-size: 1.2rem; line-height: 1.2; }
.myew-slide__price { grid-area: price; font-size: 1.4rem; font-weight: 700; }
.myew-slide__text  { grid-area: text; opacity: 0.9; }
.myew-slide__list  { grid-area: list; margin: 0; padding-left: 1.1em; }
.myew-slide__button { grid-area: button; }
.myew-slide__caption { grid-area: caption; opacity: 0.9; }
.myew-slide__img {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
} .myew-slide__button a {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
border-radius: 10px;
padding: 10px 14px;
} .myew-slider__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
border: 0;
cursor: pointer;
width: 38px;
height: 38px;
border-radius: 999px;
line-height: 38px;
font-size: 20px;
background: rgba(0,0,0,0.08);
}
.myew-slider__arrow--prev { left: 10px; }
.myew-slider__arrow--next { right: 10px; }
.myew-slider__dots {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 12px;
}
.myew-slider__dot {
width: 9px;
height: 9px;
border-radius: 99px;
border: 0;
cursor: pointer;
background: rgba(0,0,0,0.18);
}
.myew-slider__dot.is-active {
background: rgba(0,0,0,0.45);
}  .myew-slider--posts.myew-variant--split .myew-slide__grid {
grid-template-columns: 40% 60%;
grid-template-areas:
"media title"
"media text"
"media button";
} .myew-slider--posts.myew-variant--overlay .myew-slide__grid {
grid-template-columns: 1fr;
grid-template-areas:
"media"
"title"
"text"
"button";
}
.myew-slider--posts.myew-variant--overlay .myew-slide__media { position: relative; }
.myew-slider--posts.myew-variant--overlay .myew-slide__media::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.35);
border-radius: 12px;
}
.myew-slider--posts.myew-variant--overlay .myew-slide__title,
.myew-slider--posts.myew-variant--overlay .myew-slide__text,
.myew-slider--posts.myew-variant--overlay .myew-slide__button {
position: relative;
z-index: 1;
}
.myew-slider--posts.myew-variant--overlay .myew-slide__title,
.myew-slider--posts.myew-variant--overlay .myew-slide__text { color: #fff; } .myew-slider--images.myew-variant--image .myew-slide__grid { grid-template-areas: "media"; }
.myew-slider--images.myew-variant--image .myew-slide__caption { display: none; } .myew-slider--images.myew-variant--caption .myew-slide__grid {
grid-template-areas:
"media"
"caption";
} .myew-slider--images.myew-variant--overlay .myew-slide__grid {
grid-template-areas:
"media"
"caption";
}
.myew-slider--images.myew-variant--overlay .myew-slide__media { position: relative; }
.myew-slider--images.myew-variant--overlay .myew-slide__caption {
margin-top: -44px;
padding: 10px 12px;
border-radius: 10px;
background: rgba(0,0,0,0.55);
color: #fff;
width: fit-content;
max-width: 100%;
} .myew-slider--pricing.myew-variant--split .myew-slide__grid {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"title price"
"text  price"
"list  button";
} .myew-slider--services.myew-variant--split .myew-slide__grid {
grid-template-columns: 40% 60%;
grid-template-areas:
"media title"
"media text"
"media list"
"media button";
}