/* COMPONENT DEFINITION */
         .carousel {
         /* INPUTABLE */
         --padding-top: 3vw;
         --padding-right: 3vw;
         --padding-left: 3vw;
         --padding-bottom: 3vw;
         --box-width: 26vw;
         --box-spacer: 3vw;
         --box-aspect-ratio: 12 / 9;
         --bg-color: white;
         --scrollbar-color: lightgrey;
         --scrollbar-thumb-size: 5px;
         --border-radius-width: 2px;
         /* DERIVED -  Do Not Override !! */
         --box-height: calc(var(--box-width) * var(--box-aspect-ratio));
         --padding-bottom-base: calc(
         var(--padding-bottom) - var(--scrollbar-thumb-size)
         );
         --padding-bottom-outer: calc(var(--padding-bottom-base) * 0.5);
         --padding-bottom-inner: calc(var(--padding-bottom-base) * 0.5);
         /* style */
         background: var(--bg-color);
         padding-top: var(--padding-top);
         padding-right: var(--padding-right);
         padding-left: var(--padding-left);
         padding-bottom: var(--padding-bottom-outer);
         border-radius: var(--border-radius-width);
         }
         .carousel__container {
         display: flex;
         overflow-x: scroll;
         scroll-snap-type: x proximity;
         padding-bottom: var(--padding-bottom-inner);
         }
         .carousel__container::-webkit-scrollbar {
         height: var(--scrollbar-thumb-size);
         }
         .carousel__container::-webkit-scrollbar-thumb {
         background-color: var(--scrollbar-color);
         border-radius: 50px;
         visibility: hidden;
         border-radius: var(--border-radius-width);
         }
         .carousel__container:hover::-webkit-scrollbar-thumb {
         visibility: visible;
         }
         .carousel__box + .carousel__box {
         margin-left: var(--box-spacer);
         }
         .carousel__box {
         flex-shrink: 0;
         width: var(--box-width);
         height: var(--box-height);
         overflow: hidden;
         position: relative;
         border-radius: var(--border-radius-width);
         scroll-snap-align: start;
         }
         .carousel__box img {
         display: block;
         width: 100%;
         height: 100%;
         object-fit: cover;
         }
         .good-green {
         color: #83f1a6;
         }
         .bottom-spacer {
         padding: 0;
         margin-top: 15vmax;
         }
         .heading {
         font-weight: 400;
         font-size: calc(1rem * 1.414 * 1.414 * 1.414);
         line-height: 1;
         letter-spacing: 0.02em;
         }
         /* CAROUSLE COMPONENT USE */
         .my-carousel-1 {
         /* INPUTABLE */
         --padding-top: 0vw;
         --padding-left: 0vw;
         --padding-right: 0vw;
         --padding-bottom: 4vw;
         --box-width: 40vw;
         --box-spacer: 2vw;
         --box-aspect-ratio: 12 / 9;
         --bg-color: transparent;
         --scrollbar-color: #83f1a6;
         --scrollbar-thumb-size: 0.5vw;
         --border-radius-width: 10px;
         margin-bottom: 1rem;
         }
         @media (min-width: 800px) {
         .my-carousel-1 {
         --box-width: 25vw;
         }
         }
         @media (min-width: 1000px) {
         .my-carousel-1 {
         --box-width: 15vw;
         }
         }
         .my-carousel-2 {
         margin-left: auto;
         margin-right: auto;
         max-width: 75vw;
         /* INPUTABLE */
         --padding-top: 1vw;
         --padding-left: 1vw;
         --padding-right: 1vw;
         --padding-bottom: 1vw;
         --box-width: 45vw;
         --box-spacer: 1vw;
         --box-aspect-ratio: 1 / 1;
         --bg-color: white;
         --scrollbar-color: lightgrey;
         --scrollbar-thumb-size: 0.5vw;
         --border-radius-width: 1px;
         margin-bottom: 2rem;
         }
         .my-carousel-3 {
         /* INPUTABLE */
         --padding-top: 0vw;
         --padding-left: 0vw;
         --padding-right: 0vw;
         --padding-bottom: 4vw;
         --box-width: calc( 100vw / 3 );
         --box-spacer: 1vw;
         --box-aspect-ratio: 9 / 14;
         --bg-color: none;
         --scrollbar-color: hsl(180,60%,20%);
         --scrollbar-thumb-size: 1vw;
         --border-radius-width: 2px;
         margin-bottom: 1rem;
         }
         @media (min-width: 500px) {
         .my-carousel-3 {
         --box-width: calc( 100vw / 4 );
         }
         }
         @media (min-width: 800px) {
         .my-carousel-3 {
         --box-width: calc( 100vw / 5 );
         }
         }
         @media (min-width: 1100px) {
         .my-carousel-3 {
         --box-width: calc( 100vw / 6 );
         }
         }
         @media (min-width: 1400px) {
         .my-carousel-3 {
         --box-width: calc( 100vw / 7 );
         }
         }
         .my-carousel-4 {
         /* INPUTABLE */
         --padding-top: 2vw;
         --padding-left: 2vw;
         --padding-right: 2vw;
         --padding-bottom: 2vw;
         --box-width: 40vw;
         --box-spacer: 2vw;
         --box-aspect-ratio: 12 / 9;
         --bg-color: white;
         --scrollbar-color: lightgrey;
         --scrollbar-thumb-size: 0.5vw;
         --border-radius-width: 0px;
         margin-bottom: 2rem;
         }
         @media (min-width: 800px) {
         .my-carousel-4 {
         --box-width: 25vw;
         }
         }
         @media (min-width: 1000px) {
         .my-carousel-4 {
         --box-width: 15vw;
         }
         }
         video{
         display: block;
         width: 100%;
         height: 100%;
         object-fit: cover;
         }