.section.carousel {
    position: relative; overflow: hidden;
    --button:64px; --buttonfont:32px;

    padding-bottom: calc(var(--section-padding) + var(--button));
}



.section.carousel .txt {
    position: relative;
    z-index: 2;
    background: white; color: black;
    border-radius: var(--radius); padding: var(--section-padding);
    width: calc(50% - (var(--gutter) / 2)); margin: var(--gutter) 0;
    min-width: 640px;
 }

.section.carousel .images {
    display:flex; position:absolute; height:calc(50% - var(--gutter)); height:50%; top:0; left:0; background:var(--blue);

}
 button.pause_carousel{
    height: var(--button); margin: var(--gutter) 0;
    line-height: var(--button);
    min-width: var(--button);
    display: block;
    cursor: pointer;
    border: 2px solid transparent;
    background-color: white; color: var(--black);
    text-align: center;
    border-radius: 50%; position: relative;
    z-index: 11;
}
button.pause_carousel .icon {font-style: normal !important; display: block; margin:auto; width: 32px; height: 32px; line-height: 32px;  }

button.pause_carousel:is(:hover,:focus-visible){ background-color: var(--hover_blue); }
button.pause_carousel:focus-visible{ outline: 3px solid black; box-shadow: 0 0 0 6px white; }

button.pause_carousel .icon::after{

    content: "\e809";
    display: block;
    font-family: "esero";
    font-size:  var(--buttonfont);
    position: relative;

}
button.pause_carousel.paused .icon::after{

    content: "\e80f";
    left: 0.125em;

}


@media all and (max-width: 1199.98px) {

}
@media all and (max-width: 899.98px) {
    .section.carousel { padding: calc(var(--section-padding) * 3) var(--section-padding);  --button:60px; --buttonfont:32px; }
    .section.carousel .txt {
        width: calc(66.666% - (var(--gutter) / 3)); min-width: 500px;
    }


}
@media all and (max-width: 599.98px) {
    .section.carousel { padding: calc(var(--section-padding) * 5) var(--section-padding); }
    .section.carousel .txt {
        width: 100%; min-width: 10px;
    }
    button.pause_carousel{ margin-top: 0; }
}

.section.carousel .images img { display:block;

    margin:calc(var(--gutter) / 2) var(--gutter);
    height:calc(100% - var(--gutter));

    margin:0 var(--gutter);
    height:100%;

    width:auto;

    -webkit-transform: translate3d(0,0,0);
}

.section.carousel .images {
    pointer-events:none; transform-style: preserve-3d;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start; justify-content:space-around;
    width: fit-content;
    white-space: nowrap;
}
.section.carousel .images_top {animation: loop 60s linear infinite;
      border-top:var(--section-padding) solid transparent;  border-bottom:var(--gutter) solid transparent;
}
.section.carousel .images_bottom {
    top:50%; animation: loop2 60s linear infinite;
     border-bottom:var(--section-padding) solid transparent;  border-top:var(--gutter) solid transparent;
}
/*
.section.carousel:not(.paused) .images_top {
    animation: loop 60s linear infinite;
}
.section.carousel:not(.paused) .images_bottom {
    animation: loop2 60s linear infinite;
}
.section.carousel.paused .images_top {
    transform: translateX(-40%);
}
.section.carousel.paused .images_bottom {
    transform: translateX(-40%);
}*/

@keyframes loop {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-50%);}
}
@keyframes loop2 {
    0% {transform: translateX(-50%);}
    100% {transform: translateX(0%);}
}


@media (prefers-reduced-motion: reduce) {
    .section.carousel .images {
        animation: none !important;
    }
    button.pause_carousel { display: none !important;}
    .section.carousel {
        padding-top: calc(var(--section-padding) + var(--button));
        padding-bottom: calc(var(--section-padding) + var(--button));
    }
}