.afe-carousel {
position: relative;
width: 100%;
height: 100%;
}
.afe-carousel__inner {
position: relative;
width: 100%;
height: 100%;
} .afe-carousel__items {
position: relative;
width: 100%;
height: 100%;
display: grid;
grid-template-areas: "afe-stack";
}
.afe-carousel__item {
grid-area: afe-stack;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.afe-carousel__item.is-active {
opacity: 1;
visibility: visible;
transition: opacity 0.4s ease, visibility 0s linear 0s;
z-index: 1;
}
.afe-carousel__item .e-loop-item {
width: 100%;
height: 100%;
} @media (prefers-reduced-motion: reduce) {
.afe-carousel__item,
.afe-carousel__item.is-active {
transition: none;
}
} .afe-carousel__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: #F9B819;
color: #231F20;
border: 2px solid transparent;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.15s ease, transform 0.15s ease;
}
.afe-carousel .afe-carousel__btn{
padding: 0.4rem;
}
.afe-carousel__btn svg{
height: 1rem;
width: 1rem;
}
.afe-carousel__btn svg path{
fill: #ffffff;
}
.afe-carousel__btn:hover svg path,
.afe-carousel__btn:focus-visible svg path{
fill: #231F20;
}
.afe-carousel__btn--prev {
left: 8px;
}
.afe-carousel__btn--next {
right: 8px;
} .afe-carousel__notice {
font-family: inherit;
}