.m3slider {
    overflow: hidden;
	position: relative;
}

.m3slides {
    display: flex;
    width: max-content;
}

.sl-1 .m3slide, .sl-2 .m3slide {
	margin: 0;
}

.sl-1 .m3slide img, .sl-2 .m3slide img {
    height: 100%;
    width: 100%;
    object-fit: cover;
	object-position: center;
}


/* Change this in other classes */

.m3slide[data-order="1"] {
	transform: translateX(0);
}

.m3slide.active[data-order="1"] {
	transform: translateX(-100%);
}

.m3slide.active[data-order="0"] {
	transform: translateX(0);
}




.m3controls-wrapper {
    width: 100%;
	margin-bottom: 1em;
	position: absolute;
    z-index: 2;
    bottom: 0;
}

.m3controls {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.m3bullets {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0.4em 0;
    gap: 5px;
    justify-content: center;
}

.m3bullets > div {
    width: 18px;
	height: 18px;
    border-radius: 50%;
    border: 2px solid #fff;
	cursor: pointer;
	transition: all 0.35s ease-in-out;
}

.m3bullets > div.current {
    background-color: #fff;
}

.sl-arrows {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
	padding: 0 36px;
	z-index: 1;
}

.sldir {
    cursor: pointer;
}

.sldir svg {
    width: 30px;
	height: 30px;
}

@media only screen and (max-width: 981px) {
.alignfull .m3slider.sl-1 {
    padding-left: 0;
    padding-right: 0;
	max-width: 100%;
}
.sl-1 .m3slide {
	/* padding: 50px; */
}
.m3bullets > div {
    width: 15px;
	height: 15px;
}
.sl-arrows {
	padding: 0 4px;
}
.sldir svg {
    width: 20px;
	height: 20px;
}
}



.sl-2 .m3bullets > div {
    width: 14px;
    height: 14px;
    border-color: var(--wp--preset--color--gray-200);
    background-color: var(--wp--preset--color--gray-200);
}

.sl-2 .m3bullets > div.current {
    border-color: var(--wp--preset--color--accent);
    background-color: var(--wp--preset--color--accent);
}

.sl-2 .m3bullets {
    gap: 10px;
}

.sl-2 .m3controls-wrapper {
	position: relative;
	margin-bottom: 0;
	margin-top: 28px;
}

.sl-2 .sl-arrows {
    padding: 0 28px;
	height: calc(100% - 42px);
}

.sl-2 .sldir {
    background-color: #fff;
    height: 36px;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
}

.sl-2 .sldir svg {
    width: 16px;
	height: 16px;
}

.sl-2 .sldir path {
    fill: var(--wp--preset--color--accent);
}




.m3slider  ul.products.m3slides {
    display: flex;
    gap: 20px;
}

.m3slider  ul.products.m3slides li {
    width: 230px;
}


.sl-3.msld-arrows > *:first-child {
    margin: 0 45px;
    width: calc(100% - 90px);
    overflow: hidden;
}

.sl-3.msld-arrows .sl-arrows {
    padding: 0;
}

.sl-3.msld-arrows .sl-arrows .sldir svg {
    width: 24px;
    height: 24px;
}

.sl-3.msld-arrows .sl-arrows .sldir svg path {
    fill: var(--wp--preset--color--gray-200);
}


@media only screen and (max-width: 981px) {
.sl-3.msld-arrows > *:first-child {
    margin: 0 25px;
    width: calc(100% - 50px);
}	
.sl-3.msld-arrows .sl-arrows .sldir svg {
    width: 17px;
    height: 17px;
}
.m3slider ul.products.m3slides {
    gap: 10px;
}
.m3slider ul.products.m3slides li {
    width: 145px;
}
.m3slider ul.products.m3slides li figure, .m3slider ul.products.m3slides li figure img {
    height: 125px;
}

}