.slider_2__loading {
position: relative;
overflow: hidden;
background-color: var(--neutral-200);
position: absolute;
width: 100%;
aspect-ratio: 16 / 9;
max-height: 720px;
}
.slider_2__loading::after {
content: "";
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .5) 60%, rgba(255, 255, 255, 0));
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translate(-100%);
animation: shimmer 1.2s infinite;
}
.splide__track {
transition: height 125ms;
}
.slider_2__item {
display: grid;
position: relative;
height: fit-content;
}
.slider_2__img {
grid-area: 1 / 1;
display: grid;
}
.slider_2__img::after {
content: '';
position: absolute;
inset: 0;
background: var(--overlay);
z-index: 1;
}
.slider_2__img > * {
grid-area: 1/1;
}
.slider_2__img > *:last-child {
z-index: 1;
}
.slider_2__img img {
aspect-ratio: 16 / 9;
width: 100%;
max-height: 720px;
object-fit: cover;
object-position: inherit;
}
.slider_2__container {
grid-area: 1 / 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: end;
width: 100%;
padding-bottom: 90px;
z-index: 1;
}
.slider_2__intro_text {
margin-bottom: 8px;
color: #fff;
text-shadow: var(--text-shadow);
display: flex;
gap: 4px;
}
.slider_2__intro_text_style {
display: inline-block;
position: relative;
top: -1px;
}
.slider_2__title {
color: #fff;
text-shadow: var(--text-shadow);
}
.slider_2__content {
color: #fff;
margin-top: 12px;
text-shadow: var(--text-shadow);
}
.slider_2__buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
width: fit-content;
}
.slider_2__buttons .btn__inner {
box-shadow: var(--box-shadow-warm);
}
.no-drag {
user-select: text !important;
-webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; }
.slider_2__arrows {
position: absolute;
right: 20px;
bottom: 20px;
height: 45px;
pointer-events: none;
}
.slider_2__arrows > * {
pointer-events: auto;
}
.splide__arrow--prev svg path {
transition: 250ms;
}
.splide__arrow--prev:hover svg path {
transition: 125ms;
transform: translateX(-1px);
}
.splide__arrow--next svg path {
transition: 250ms;
}
.splide__arrow--next:hover svg path {
transition: 125ms;
transform: translateX(1px);
}
@media (min-width: 1024px) and (max-width: 1366px) {
.slider_2__img img {
max-height: 540px;
}
.slider_2__loading {
max-height: 540px;
}
}
@media(max-width: 1000px) {
.splide__arrows {
padding-top: 56.25%;
top: -65px;
width: 100%;
height: fit-content;
display: flex;
justify-content: end;
align-items: end;
}
.slider_2__img {
grid-area: unset;
}
.slider_2__img::after {
background-size: 100% 80px;
background-repeat: no-repeat;
background-position: bottom;
aspect-ratio: 16 / 9;
}
.slider_2__container {
grid-area: unset;
padding-bottom: 32px;
padding-top: 24px;
}
.slider_2__intro_text {
color: unset;
text-shadow: unset;
}
.slider_2__title {
color: unset;
text-shadow: unset;
}
.slider_2__content {
color: unset;
text-shadow: unset;
max-width: 700px !important;
}
}