Advertisement
s-sols

Untitled

May 24th, 2024
515
0
1 day
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.51 KB | None | 0 0
  1. body.home:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .site-banner .item-wrapper.owl-carousel {
  2.     display: flex !important;
  3.     justify-content: center;
  4.     overflow: hidden;
  5.     gap: 30px;
  6. }
  7.  
  8. body.home .site-banner .item-wrapper.owl-carousel {
  9.     --item-width: calc((100vw - 500px) / 3);
  10. }
  11.  
  12.     body.home .site-banner .item-wrapper.owl-carousel.owl-loaded {
  13.         gap: 0 !important;
  14.     }
  15.  
  16. body.home:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .site-banner .item-wrapper.owl-carousel .item {
  17.     float: left;
  18.     display: block !important;
  19.     width: var(--item-width);
  20.     flex-shrink: 0;
  21.     order: 2;
  22. }
  23.  
  24. @media screen and (min-width: 1024px) {
  25.     body.home:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .site-banner .item-wrapper.owl-carousel:not(.owl-loaded) .item {
  26.         transform: translateX(-18px);
  27.     }
  28. }
  29.  
  30. body.home:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .site-banner .item-wrapper.owl-carousel .item:nth-of-type(1n + 4) {
  31.     display: none !important;
  32. }
  33.  
  34. body.home:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .site-banner .item-wrapper.owl-carousel .item:last-of-type {
  35.     order: 1;
  36.     display: block !important;
  37. }
  38.  
  39. body.home:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .site-banner .item-wrapper.owl-carousel .item:nth-last-child(2) {
  40.     order: 0;
  41.     display: block !important;
  42. }
  43.  
  44. body.home .site-banner .item-wrapper.owl-carousel .owl-item {
  45.     width: var(--item-width) !important;
  46. }
  47.  
  48. body.home:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .site-banner .item-wrapper.owl-carousel .item img {
  49.     display: block;
  50.     width: 100%;
  51.     height: auto;
  52.     aspect-ratio: 340/370;
  53. }
  54.  
  55.  
  56. @media screen and (max-width: 1023px) {
  57.     body.home .site-banner .item-wrapper.owl-carousel {
  58.         --item-width: calc((100vw - 30px - 60px) / 3);
  59.         --item-width: calc((100vw - 30px + (100vw - 1020px) / 2) / 3);
  60.     }
  61. }
  62.  
  63.  
  64. @media screen and (max-width: 767px) {
  65.     body.home:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .site-banner .item-wrapper.owl-carousel {
  66.         justify-content: center;
  67.     }
  68.  
  69.         body.home:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .site-banner .item-wrapper.owl-carousel .item:nth-of-type(1n + 3) {
  70.             display: none !important;
  71.         }
  72.  
  73.         body.home:is(.seraph-accel-js-lzl-ing, .seraph-accel-js-lzl-ing-ani) .site-banner .item-wrapper.owl-carousel .item:last-of-type {
  74.             order: 0;
  75.             display: block !important;
  76.         }
  77.  
  78.     body.home .site-banner .item-wrapper.owl-carousel {
  79.         --item-width: calc(100vw - 30px - 60px - 40px);
  80.     }
  81. }
  82.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement