.autoscroll-images{
position: relative;
overflow-x: hidden;
}
.autoscroll-images::before {
left: 0;
top: 0;
bottom: 0;
}
.autoscroll-images::before, .autoscroll-images::after {
position: absolute;
display: block;
width: 150px;
background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
z-index: 2;
}
.autoscroll-images::after {
right: 0;
top: 0;
bottom: 0;
transform: rotateZ(180deg);
}
.autoscroll-images:hover .autoscroll-images-slider, .autoscroll-images:active .autoscroll-images-slider{
animation-play-state: paused;
}
.autoscroll-images .autoscroll-images-slider{
display: flex;
flex-direction: row;
gap: var(--wp--style--block-gap);
align-items: center;
}
.autoscroll-images .autoscroll-images-image-container{
position: relative;
height: 150px; flex: 1 0 150px; }
.autoscroll-images .autoscroll-images-image{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
object-fit: contain;
object-position: 50% 50%;
filter: grayscale(1);
transition: filter 0.25s ease-in-out;
}
.autoscroll-images .autoscroll-images-image:hover, .autoscroll-images .autoscroll-images-image:active{
filter: grayscale(0);
}
.has-white-background-color .autoscroll-images::before, .has-white-background-color .autoscroll-images::after {
background: linear-gradient(to right, #fdfeffff 0%, #fdfeff00 100%); }
.has-light-grey-background-color .autoscroll-images::before, .has-light-grey-background-color .autoscroll-images::after {
background: linear-gradient(to right, #f9f9f9ff 0%, #f9f9f900 100%); }
.has-dark-grey-background-color .autoscroll-images::before, .has-dark-grey-background-color .autoscroll-images::after {
background: linear-gradient(to right, #303030ff 0%, #30303000 100%); }
.has-black-background-color .autoscroll-images::before, .has-black-background-color .autoscroll-images::after {
background: linear-gradient(to right, #000000ff 0%, #00000000 100%); }
.has-azure-blue-background-color .autoscroll-images::before, .has-azure-blue-background-color .autoscroll-images::after {
background: linear-gradient(to right, #008bffff 0%, #008bff00 100%); }
.has-dirty-azure-blue-background-color .autoscroll-images::before, .has-dirty-azure-blue-background-color .autoscroll-images::after {
background: linear-gradient(to right, #0076d6ff 0%, #0076d600 100%); }
.has-royal-blue-background-color .autoscroll-images::before, .has-royal-blue-background-color .autoscroll-images::after {
background: linear-gradient(to right, #0000ffff 0%, #0000ff00 100%); }
.has-deep-blue-background-color .autoscroll-images::before, .has-deep-blue-background-color .autoscroll-images::after {
background: linear-gradient(to right, #0000a5ff 0%, #0000a500 100%); }
.has-medium-blue-background-color .autoscroll-images::before, .has-medium-blue-background-color .autoscroll-images::after {
background: linear-gradient(to right, #00187aff 0%, #00187a00 100%); }
.has-darkest-blue-background-color .autoscroll-images::before, .has-darkest-blue-background-color .autoscroll-images::after {
background: linear-gradient(to right, #00173dff 0%, #00173d00 100%); }
.has-red-background-color .autoscroll-images::before, .has-red-background-color .autoscroll-images::after {
background: linear-gradient(to right, #ed0000ff 0%, #ed000000 100%); }
.has-cimson-background-color .autoscroll-images::before, .has-cimson-background-color .autoscroll-images::after {
background: linear-gradient(to right, #830000ff 0%, #83000000 100%); }
.has-canyenne-background-color .autoscroll-images::before, .has-canyenne-background-color .autoscroll-images::after {
background: linear-gradient(to right, #ed4841ff 0%, #ed484100 100%); }
.has-light-mint-background-color .autoscroll-images::before, .has-light-mint-background-color .autoscroll-images::after {
background: linear-gradient(to right, #35c99bff 0%, #35c99b00 100%); }
.has-yellow-background-color .autoscroll-images::before, .has-yellow-background-color .autoscroll-images::after {
background: linear-gradient(to right, #ffe700ff 0%, #ffe70000 100%); }
.has-deep-orange-background-color .autoscroll-images::before, .has-deep-orange-background-color .autoscroll-images::after {
background: linear-gradient(to right, #fe5722ff 0%, #fe572200 100%); }
.has-deep-pink-background-color .autoscroll-images::before, .has-deep-pink-background-color .autoscroll-images::after {
background: linear-gradient(to right, #ff7ea1ff 0%, #ff7ea100 100%); }
.has-deep-mauve-background-color .autoscroll-images::before, .has-deep-mauve-background-color .autoscroll-images::after {
background: linear-gradient(to right, #6501edff 0%, #6501ed00 100%); }
.has-dark-mint-background-color .autoscroll-images::before, .has-dark-mint-background-color .autoscroll-images::after {
background: linear-gradient(to right, #33b496ff 0%, #33b49600 100%); }
.has-gold-background-color .autoscroll-images::before, .has-gold-background-color .autoscroll-images::after {
background: linear-gradient(to right, #ffc500ff 0%, #ffc50000 100%); }
.has-light-orange-background-color .autoscroll-images::before, .has-light-orange-background-color .autoscroll-images::after {
background: linear-gradient(to right, #ff8a66ff 0%, #ff8a6600 100%); }
.has-light-pink-background-color .autoscroll-images::before, .has-light-pink-background-color .autoscroll-images::after {
background: linear-gradient(to right, #fea8baff 0%, #fea8ba00 100%); }
.has-mauve-background-color .autoscroll-images::before, .has-mauve-background-color .autoscroll-images::after {
background: linear-gradient(to right, #b48febff 0%, #b48feb00 100%); }