.hlm-carousel {
margin: 30px 0;
outline: none;
}
.hlm-carousel__stage {
position: relative;
aspect-ratio: 16 / 10;
background: var(--hlm-dark, #333);
border-radius: 6px;
overflow: hidden;
}
.hlm-carousel--single .hlm-carousel__stage {
aspect-ratio: 16 / 11;
} .hlm-carousel__stage .hlm-carousel__image {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
object-fit: contain;
background: var(--hlm-dark, #333);
}
.hlm-carousel__caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 10px 48px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
color: var(--hlm-white, #fff);
font-size: 13px;
line-height: 1.4;
text-align: center;
}
.hlm-carousel__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: rgba(0, 0, 0, 0.45);
color: var(--hlm-white, #fff);
font-size: 24px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease;
}
.hlm-carousel__arrow:hover,
.hlm-carousel__arrow:focus-visible {
background: var(--hlm-orange, #FF9900);
}
.hlm-carousel__arrow--prev { left: 12px; }
.hlm-carousel__arrow--next { right: 12px; }
.hlm-carousel__counter {
position: absolute;
top: 12px;
right: 12px;
padding: 3px 10px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.45);
color: var(--hlm-white, #fff);
font-size: 12px;
letter-spacing: 0.03em;
}
.hlm-carousel__thumbs {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 10px;
padding-bottom: 4px;
overflow-x: auto;
scroll-behavior: smooth;
}
.hlm-carousel__thumb {
flex: 0 0 auto;
width: 64px;
height: 64px;
padding: 0;
border: 2px solid transparent;
border-radius: 4px;
overflow: hidden;
background: none;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.2s ease, border-color 0.2s ease;
}
.hlm-carousel__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.hlm-carousel__thumb:hover {
opacity: 0.9;
}
.hlm-carousel__thumb.is-active {
opacity: 1;
border-color: var(--hlm-orange, #FF9900);
}
@media (max-width: 600px) {
.hlm-carousel__stage {
aspect-ratio: 4 / 3;
border-radius: 0;
}
.hlm-carousel__arrow {
width: 34px;
height: 34px;
font-size: 20px;
}
.hlm-carousel__thumb {
width: 52px;
height: 52px;
}
}