Template:Card Slider/styles.css

box-sizing: border-box; }

.blog-slider { width: 95%; position: relative; max-width: 800px; margin: auto; background: var(--color-surface-1); box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2); padding: 25px; border-radius: 25px; transition: all 0.3s; }

.blog-slider__item { display: flex; align-items: center; }

.blog-slider__item.swiper-slide-active .blog-slider__img img { opacity: 1; transition-delay: 0.3s; }

.blog-slider__item.swiper-slide-active .blog-slider__content > * { opacity: 1; transform: none; }

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(1) { transition-delay: 0.3s; }

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(2) { transition-delay: 0.4s; }

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(3) { transition-delay: 0.5s; }

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(4) { transition-delay: 0.6s; }

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(5) { transition-delay: 0.7s; }

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(6) { transition-delay: 0.8s; }

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(7) { transition-delay: 0.9s; }

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(8) { transition-delay: 1s; }

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(9) { transition-delay: 1.1s; }

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(10) { transition-delay: 1.2s; }

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(11) { transition-delay: 1.3s; }

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(12) { transition-delay: 1.4s; }

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(13) { transition-delay: 1.5s; }

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(14) { transition-delay: 1.6s; }

.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(15) { transition-delay: 1.7s; }

.blog-slider__img { max-width: 300px; width: auto; flex-shrink: 0; height: auto; /*border-radius: 20px;*/ /*transform: translateX(-10px);*/ overflow: hidden; margin: auto auto; /*background: var(--border-color-base--lighter);*/ /*box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04), 0 3px 6px rgba(0, 0, 0, 0.0575);*/ } /*.blog-slider__img:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; opacity: 0.8; }*/

.blog-slider__img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; border-radius: 20px; transition: all 0.3s; }

/*.blog-slider__img .image { position: relative; top: 50%; transform: translateY(-50%); margin: 0 auto; }*/

.blog-slider__content { padding-right: 25px; }

.blog-slider__content > * { opacity: 0; transform: translateY(25px); transition: all 0.4s; }

.blog-slider__code { color: var(--color-base); margin-bottom: 15px; display: block; font-weight: 500; }

.blog-slider__title { font-size: 24px; font-weight: 700; color: var(--color-base); margin-bottom: 20px; }

.blog-slider__text { color: var(--color-base); margin-bottom: 30px; line-height: 1.5em; }

.blog-slider__button { display: inline-flex; padding: 15px 35px; border-radius: 50px; color: var(--color-surface-1); text-decoration: none; font-weight: 500; justify-content: center; text-align: center; letter-spacing: 1px; }

.blog-slider__button a { color: white !important; }

.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction { bottom: 10px; left: 0; width: 100%; }

.blog-slider__pagination { position: absolute; /*z-index: 21;*/ right: 20px; width: 11px !important; text-align: center; left: auto !important; top: 50%; bottom: auto !important; transform: translateY(-50%); }

.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet { margin: 8px 0; }

.blog-slider__pagination .swiper-pagination-bullet { width: 11px; height: 11px; display: block; border-radius: 10px; background: var(--color-base);; opacity: 0.2; transition: all 0.3s; }

.blog-slider__pagination .swiper-pagination-bullet-active { opacity: 1; height: 30px; }

@media screen and (max-width: 768px) { .blog-slider__pagination .swiper-pagination-bullet-active { height: 11px; width: 30px; }	.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; }	.blog-slider__pagination { transform: translateX(-50%); left: 50% !important; top: 20em; width: 100% !important; display: flex; justify-content: center; align-items: center; }	.blog-slider__content { /*margin-top: -80px;*/ text-align: center; padding: 0 30px; }	/*.blog-slider__img { transform: translateY(-25%); width: 90%; }*/	.blog-slider__item { flex-direction: column; }	.blog-slider { min-height: 500px; height: auto; } }

@media screen and (max-width: 576px) { .blog-slider__button a { width: 100%; }	.blog-slider__content { padding: 0; }	/*.blog-slider__img { width: 75%; }*/ }

@media screen and (max-height: 500px) and (min-width: 992px) { .blog-slider__img { height: 270px; }	.blog-slider { height: 350px; } }

@media screen and (max-width: 992px) { .blog-slider { max-width: 680px; } }

@media screen and (min-width: 992px) { .blog-slider__img { padding-right: 25px; } }