:root {
    --action-figure-transition-time: .3s;
}

.result .main {
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.result .main .header {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    align-content: center;
    gap: 10px;
}

.result .main .header h2 {
    text-align: center;
    font-size: 40px;
    font-weight: 600;
    line-height: 100%;
}

.result .main .slider {
    height: fit-content;
    padding-bottom: 32px;
    overflow-x: scroll;
    scroll-behavior: smooth;
    
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    align-content: center;
    gap: 21px;
}

.result .main .slider::-webkit-scrollbar {
    height: 2px;
    border-radius: 4px;
}

.result .main .slider::-webkit-scrollbar-thumb {
    border-radius: 4px;
    height: 2px;
    background-color: #8AC1EA;
    /* border: 4px solid #8AC1EA; */
}


.result .main p {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 130%;
}

.result .main > p {
    margin-top: 45px;
}

.result .action-figure {
    flex-shrink: 0;
    box-sizing: content-box;
    width: 155px !important;
    /* height: 254px; */
    padding: 10px 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    align-content: center;
    gap: 0;
    background-color: #f9f6f3;
}

.result .action-figure .img-container {
    width: 100%;
    isolation: isolate;
}

.result .action-figure .action-figure-img {
    transition: transform var(--action-figure-transition-time);
    width: 100%;
    mix-blend-mode: darken;
    position: relative; 
    z-index: 1;
}

.result .action-figure.selected .action-figure-img {
    transform: scale(1.12);
}

.slider.active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}
.slider {
  cursor: grab;
  cursor: -webkit-grab;
}
.slider img,
.slider div.img-container {
  pointer-events: none;
  user-drag: none;
  -webkit-user-drag: none;
}

.dragging *,
.dragging {
  user-select: none;
}

.result .action-figure .radio-container {
    /*margin-top: 27px;*/
}