.picto_text_box p {
font-size: clamp(.1rem, .1vw + 1rem, .9rem);
}
.radios {
display: flex;
justify-content: center;
width: calc(100vw + 4rem);
} .cursors_holder {
display: flex;
overflow-y: hidden;
max-width: 100vw;
}
.cursors_holder::-webkit-scrollbar,
.cursors_holder.scroller::-webkit-scrollbar {
color: transparent;
}
.cursors_holder::-webkit-scrollbar-thumb,
.cursors_holder.scroller::-webkit-scrollbar-thumb {
background: transparent;
} .radio_box {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
position: relative;
gap: .5rem;
aspect-ratio: 1/1;
}
.cursor_box {
border: 1px solid transparent;
transition: border .5s ease;
padding: 2rem 1rem 1rem;
margin: .5rem;
border-radius: 30px;
}
.orange .cursor_box:has(input:checked) {
border: 1px solid var(--main-orange);
}
.purple .cursor_box:has(input:checked) {
border: 1px solid var(--main-purple);
}
.green .cursor_box:has(input:checked) {
border: 1px solid var(--main-green);
} .cursors_holder::-webkit-scrollbar,
.cursors_holder.scroller::-webkit-scrollbar {
color: transparent;
}
.cursors_holder::-webkit-scrollbar-thumb,
.cursors_holder.scroller::-webkit-scrollbar-thumb {
background: transparent;
} .cursor_input {
position: absolute;
top: 50%;
left: 50%;
transition: all .2s ease;
transform: translate(-50%, -50%);
opacity: 0;
z-index: 1;
cursor: pointer;
}
.cursor_box,
.cursor_input {
width: 180px;
height: 180px;
} .picto {
min-height: 60px;
max-height: 60px;
}
.picto {
height: 100%;
}
.picto_text_box {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
@media (max-width: 1500px) {
.cursor_box,
.cursor_input {
width: 170px;
height: 170px;
}
.picto {
min-height: 75px;
max-height: 75px;
}
}
@media (max-width: 1500px) {
.cursor_box,
.cursor_input {
width: 160px;
height: 160px;
}
.picto {
min-height: 45px;
max-height: 45px;
}
}
@media all and (max-width: 1300px) {
.cursor_box {
padding: 1.5rem .5rem .5rem;
}
.cursor_box,
.cursor_input {
width: 145px;
height: 145px;
}
.picto {
min-height: 40px;
max-height: 40px;
}
}
@media all and (max-width: 768px) { .cursor_box {
margin: .2rem;
}
}