.bg-icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.image-thumb {
    position: relative;
    display: block;
    width: 100%;
    background-color: var(--color__fill-4);
    z-index: 0;
}

.image-thumb.--133 {
    padding-top: 133%;
}

.image-thumb.--131 {
    padding-top: 131%;
}

.image-thumb.--101 {
    padding-top: 101%;
}

.image-thumb.--100 {
    padding-top: 100%;
}

.image-thumb.--99 {
    padding-top: 99%;
}

.image-thumb.--75 {
    padding-top: 75%;
}

.image-thumb.--74-5 {
    padding-top: 72%;
}

.image-thumb.--71-6 {
    padding-top: 71.6%;
}

.image-thumb.--66 {
    padding-top: 66%;
}

.image-thumb.--53-9 {
    padding-top: 53.9%;
}

.image-thumb.--53-5 {
    padding-top: 53.5%;
}

.image-thumb.--52-3 {
    padding-top: 52.3%;
}

.image-thumb.--51 {
    padding-top: 51%;
}

.image-thumb.--49-4 {
    padding-top: 49.4%;
}

.image-thumb.--48-9 {
    padding-top: 48.9%;
}

.image-thumb.--44-4 {
    padding-top: 44.4%;
}

.image-thumb.--37-7 {
    padding-top: 37.7%;
}

.image-thumb.--23-9 {
    padding-top: 23.9%;
}

.image-thumb.--22 {
    padding-top: 22%;
}

.image-thumb.--20 {
    padding-top: 20%;
}

.image-thumb.--16-7 {
    padding-top: 16.7%;
}

.image-thumb picture,
.image-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.image-thumb-slider {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
}

.image-thumb-slider__inner {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

.image-thumb-slider__line {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    flex-grow: 1;
    padding-left: 0.125rem;
    padding-right: 0.125rem;
    padding-bottom: 0.5rem;
    cursor: pointer;
}

.image-thumb-slider__line:first-child {
    padding-left: 0;
}

.image-thumb-slider__line:last-child {
    padding-right: 0;
}

.image-thumb-slider__line::after {
    content: '';
    display: inline-block;
    height: 0.1875rem;
    width: 100%;
    border-radius: 0.5rem;
    background-color: rgba(var(--color__white-rgb), 0.4);
}

.image-thumb-slider__line:hover::after {
    background-color: rgba(var(--color__white-rgb), 1);
}

.image-thumb-slider__line:first-child::after {
    background-color: rgba(var(--color__white-rgb), 1);
}

.image-thumb-slider:hover .image-thumb-slider__line:not(:hover):first-child::after {
    background-color: rgba(var(--color__white-rgb), 0.4);
}

.image-thumb-slider__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease 50ms;
}

.image-thumb-slider__line:first-child + .image-thumb-slider__slide {
    opacity: 1;
    visibility: visible;
}

.image-thumb-slider__line:hover + .image-thumb-slider__slide {
    opacity: 1;
    visibility: visible;
}

.close-button {
    position: relative;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    color: var(--color__dark);
}

.close-button::before,
.close-button::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 50%;
    height: 0.125rem;
    background-color: currentColor;
}

.close-button::before {
    transform: rotate(-45deg);
}

.close-button::after {
    transform: rotate(45deg);
}

/* visually-hidden */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    -webkit-clip-path: inset(100%);
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.custom-scrollbar .scrollbar-track {
    width: 0.5rem;
    background-color: transparent;
}

.custom-scrollbar .scrollbar-track::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    width: 1px;
    background-color: rgba(var(--color__dark-rgb), 0.16);
}

.custom-scrollbar .scrollbar-thumb {
    z-index: 1;
    border-radius: 1rem;
    background-color: var(--color__dark);
}

.ratio {
    position: relative;
    width: 100%;
}
.ratio::before {
    display: block;
    padding-top: var(--bs-aspect-ratio);
    content: "";
}
.ratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.--1x1 {
    --bs-aspect-ratio: 100%;
}

.--4x3 {
    --bs-aspect-ratio: 75%;
}

.--16x9 {
    --bs-aspect-ratio: 56.25%;
}

.--21x9 {
    --bs-aspect-ratio: 42.8571428571%;
}