.pharmaline-gallery {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 12px;
width: 100%;
position: relative;
} .pharmaline-gallery__thumbs-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex-shrink: 0;
width: 110px;
}
.pharmaline-gallery__thumbs {
width: 110px; overflow: hidden;
}
.pharmaline-gallery__thumb {
cursor: pointer;
border: 2px solid transparent;
overflow: hidden;
opacity: 0.55;
transition:
opacity 0.2s ease,
border-color 0.2s ease;
height: 110px !important;
min-height: 110px;
border-radius: 2px;
}
.pharmaline-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
border-radius: 2px;
}
.pharmaline-gallery__thumb.is-active {
border-color: var(--dark-blue);
opacity: 1;
}
.pharmaline-gallery__thumb:hover {
opacity: 0.85;
} .pharmaline-gallery__thumb-arrow {
background: none;
border: none;
cursor: pointer;
padding: 4px;
color: #555;
line-height: 0;
transition: color 0.2s;
flex-shrink: 0;
}
.pharmaline-gallery__thumb-arrow:hover {
color: #111;
}
.pharmaline-gallery__thumb-arrow:disabled {
opacity: 0.25;
cursor: default;
}
.pharmaline-gallery__thumb-arrow svg {
width: 20px;
height: 20px;
display: block;
} .pharmaline-gallery__main-wrap {
flex: 1;
min-width: 0;
position: relative;
}
.pharmaline-gallery__main {
width: 100%;
overflow: hidden;
display: flex;
cursor: grab;
}
.pharmaline-gallery__slide {
width: 100% !important;
min-width: 100%;
}
.pharmaline-gallery__slide a,
.pharmaline-gallery__slide {
aspect-ratio: 1 / 1;
overflow: hidden;
}
.pharmaline-gallery__slide img {
width: 100%;
height: auto;
display: block;
} .pharmaline-gallery__main-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background: rgba(255, 255, 255, 0.88);
border: 1px solid #e0e0e0;
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition:
box-shadow 0.2s,
background 0.2s;
line-height: 0;
}
.pharmaline-gallery__main-arrow:hover {
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.pharmaline-gallery__main-arrow svg {
width: 18px;
height: 18px;
color: #333;
display: block;
}
.pharmaline-gallery__main-arrow--prev {
left: 8px;
}
.pharmaline-gallery__main-arrow--next {
right: 8px;
} @media (max-width: 1000px) {
.pharmaline-gallery {
flex-direction: column;
}
.pharmaline-gallery__thumbs-wrap {
display: none;
flex-direction: row;
width: 100%;
order: 2;
}
.pharmaline-gallery__thumbs {
width: 100% !important;
height: 80px !important;
flex: 1;
} .pharmaline-gallery__thumbs .keen-slider__slide {
min-width: 80px;
max-width: 80px;
}
.pharmaline-gallery__thumb-arrow--up svg {
transform: rotate(-90deg);
}
.pharmaline-gallery__thumb-arrow--down svg {
transform: rotate(-90deg);
}
.pharmaline-gallery__main-wrap {
order: 1;
width: 100%;
}
}