.bc-generatorism{
width: 100%; height: auto; }
.bc-generatorism[data-class='bc-generatorism--glassmorphism']{
border: 1px solid rgba(236, 236, 236, 0.1); border-radius: 25%; background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1); --filter: 10px; -webkit-backdrop-filter: blur(var(--filter)); backdrop-filter: blur(var(--filter)); }
.bc-generatorism[data-class='bc-generatorism--neumorphism']{
border-radius: 25%; --neumorphism-left-color: #fff9; --neumorphism-right-color: #0001; --dimensions: 20px; box-shadow: calc(var(--dimensions) * -0.4) calc(var(--dimensions) * -0.4) var(--dimensions) 0px var(--neumorphism-left-color), calc(var(--dimensions) * -0.3) calc(var(--dimensions) * -0.3) calc(var(--dimensions) * 0.3) 0px var(--neumorphism-left-color),
calc(var(--dimensions) * 0.4) calc(var(--dimensions) * 0.4) var(--dimensions) 0px var(--neumorphism-right-color), calc(var(--dimensions) * 0.25) calc(var(--dimensions) * 0.25) calc(var(--dimensions) * 0.3) 0px var(--neumorphism-right-color), inset 0px 0px 0px 0px var(--neumorphism-left-color),
inset 0px 0px 0px 0px var(--neumorphism-right-color), inset 0px 0px 0px 0px var(--neumorphism-left-color),
inset 0px 0px 0px 0px var(--neumorphism-right-color);
}
.bc-generatorism[data-class='bc-generatorism--neumorphism-v2']{
border-radius: 25%; --neumorphism-v2-left-color: #0001; --neumorphism-v2-right-color: #fff9; --dimensions-v2: 20px; box-shadow: 0px 0px 0px 0px var(--neumorphism-v2-right-color), 0px 0px 0px 0px var(--neumorphism-v2-right-color),
0px 0px 0px 0px var(--neumorphism-v2-left-color), 0px 0px 0px 0px var(--neumorphism-v2-left-color), inset calc(var(--dimensions-v2) * -0.4) calc(var(--dimensions-v2) * -0.4) var(--dimensions-v2) 0px var(--neumorphism-v2-right-color),
inset calc(var(--dimensions-v2) * -0.25) calc(var(--dimensions-v2) * -0.25) calc(var(--dimensions-v2) * 0.3) 0px var(--neumorphism-v2-right-color), inset calc(var(--dimensions-v2) * 0.4) calc(var(--dimensions-v2) * 0.4) var(--dimensions-v2) 0px var(--neumorphism-v2-left-color),
inset calc(var(--dimensions-v2) * 0.25) calc(var(--dimensions-v2) * 0.25) calc(var(--dimensions-v2) * 0.3) 0px var(--neumorphism-v2-left-color);
}
.bc-generatorism[data-class='bc-generatorism--neobrutalism']{
border-radius: 25%; background: #00ff9f; --thickness: 10px; --thickness-color: #000; box-shadow: var(--thickness) var(--thickness) var(--thickness-color); border: solid var(--thickness) var(--thickness-color);
}.next-image-accordion {
display: flex;
position: relative;
overflow: hidden;
}
.next-image-accordion__item {
position: relative;
flex: 1;
transition: all var(--expanding-duration) var(--expanding-ease);
overflow: hidden;
}
.next-image-accordion__item:first-child {
margin-left: 0;
}
.next-image-accordion__item:last-child {
margin-right: 0;
}
.next-image-accordion__item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all var(--expanding-duration) var(--expanding-ease);
filter: grayscale(var(--gray));
}
.next-image-accordion__item:hover img {
transform: scale(var(--scale));
filter: grayscale(0%);
}
.next-image-accordion__content {
position: absolute;
opacity: 0;
transition: opacity var(--fade-duration) var(--fade-ease);
z-index: 1;
}
.next-image-accordion__item:hover .next-image-accordion__content {
opacity: 1;
}