Improve some more stuff

templates/shortcodes/carousel.html

@@ -1,11 +1,11 @@
-<ul class="carousel">
+<ul class="carousel_{{ nth }}">
   {{ body | safe }}
 </ul>
 
 <style>
-.carousel {
+.carousel_{{ nth }} {
   width: 100%;
-  height: 300px;
+  /* height: 300px; */
   padding: 20px;
   display: flex;
   gap: 4vw;
@@ -20,12 +20,12 @@
   -ms-overflow-style: none;
 }
 /* this will hide the scrollbar in webkit based browsers - safari, chrome, etc */
-.carousel ul::-webkit-scrollbar { 
+.carousel_{{ nth }} ul::-webkit-scrollbar { 
   width: 0 !important;
   display: none; 
 }
 
-.carousel>li {
+.carousel_{{ nth }}>li {
   list-style-type: none;
   /* background-color: #eeeeee; */
   /* border: 1px solid #dddddd; */
@@ -36,15 +36,15 @@
   scroll-snap-align: center;
 }
 
-.carousel>li:nth-child(even) {
+.carousel_{{ nth }}>li:nth-child(even) {
   /* background-color: cyan; */
 }
 
-.carousel>li::after {
+.carousel_{{ nth }}>li::after {
   visibility: hidden;
 }
 
-.carousel::scroll-button(*) {
+.carousel_{{ nth }}::scroll-button(*) {
   border: 0;
   font-size: 2rem;
   background: none;
@@ -53,54 +53,54 @@
   cursor: pointer;
 }
 
-.carousel::scroll-button(*):hover,
-.carousel::scroll-button(*):focus {
+.carousel_{{ nth }}::scroll-button(*):hover,
+.carousel_{{ nth }}::scroll-button(*):focus {
   opacity: 1;
 }
 
-.carousel::scroll-button(*):active {
+.carousel_{{ nth }}::scroll-button(*):active {
   translate: 1px 1px;
 }
 
-.carousel::scroll-button(*):disabled {
+.carousel_{{ nth }}::scroll-button(*):disabled {
   opacity: 0.2;
   cursor: unset;
 }
 
-.carousel::scroll-button(left) {
+.carousel_{{ nth }}::scroll-button(left) {
   content: "◄" / "Previous";
 }
 
-.carousel::scroll-button(right) {
+.carousel_{{ nth }}::scroll-button(right) {
   content: "►" / "Next";
 }
 
-.carousel {
-  anchor-name: --my-carousel;
+.carousel_{{ nth }} {
+  anchor-name: --my-carousel_{{ nth }};
 }
 
-.carousel::scroll-button(*) {
+.carousel_{{ nth }}::scroll-button(*) {
   position: absolute;
-  position-anchor: --my-carousel;
+  position-anchor: --my-carousel_{{ nth }};
 }
 
-.carousel::scroll-button(left) {
+.carousel_{{ nth }}::scroll-button(left) {
   right: calc(anchor(left) - 70px);
   bottom: calc(anchor(bottom) + 10px);
 }
 
-.carousel::scroll-button(right) {
+.carousel_{{ nth }}::scroll-button(right) {
   left: calc(anchor(right) - 70px);
   bottom: calc(anchor(bottom) + 10px);
 }
 
-.carousel {
+.carousel_{{ nth }} {
   scroll-marker-group: after;
 }
 
-.carousel::scroll-marker-group {
+.carousel_{{ nth }}::scroll-marker-group {
   position: absolute;
-  position-anchor: --my-carousel;
+  position-anchor: --my-carousel_{{ nth }};
   bottom: calc(anchor(bottom) + 10px);
   justify-self: anchor-center;
 
@@ -109,7 +109,7 @@
   gap: 20px;
 }
 
-.carousel>li::scroll-marker {
+.carousel_{{ nth }}>li::scroll-marker {
   content: attr(data-accName);
   width: 16px;
   height: 16px;
@@ -120,7 +120,7 @@
   text-indent: 16px;
 }
 
-.carousel>li::scroll-marker:target-current {
+.carousel_{{ nth }}>li::scroll-marker:target-current {
   background-color: white;
 }
 </style>