98 lines
1.5 KiB
SCSS
98 lines
1.5 KiB
SCSS
.swiper {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.swiper-slide {}
|
|
|
|
.swiper-button-next,
|
|
.swiper-button-prev {
|
|
&:before {
|
|
content: "→";
|
|
display: block;
|
|
padding: var(--spacing-sitepadding-inline);
|
|
font-size: var(--font-size-h3);
|
|
position: absolute;
|
|
color: var(--color-goldenBeige);
|
|
}
|
|
}
|
|
|
|
.swiper-button-next {
|
|
&:before {
|
|
content: "→";
|
|
right: 0;
|
|
}
|
|
|
|
&:after {
|
|
content: "Neste";
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.swiper-button-prev {
|
|
&:before {
|
|
content: "←";
|
|
left: 0;
|
|
}
|
|
|
|
&:after {
|
|
content: "Forrige";
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.swiper-pagination {
|
|
padding-top: var(--spacing-sitepadding-inline);
|
|
padding-left: calc(var(--spacing-sitepadding-inline) + var(--size-col-1));
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: auto;
|
|
text-align: left;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
|
|
.swiper-button-next,
|
|
.swiper-button-prev {
|
|
&:before {
|
|
padding: 1rem;
|
|
font-size: var(--font-size-h5);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
|
|
.swiper-button-next,
|
|
.swiper-button-prev {
|
|
bottom: 1rem;
|
|
top: auto;
|
|
|
|
&:before {
|
|
padding: 1rem;
|
|
font-size: var(--font-size-h5);
|
|
}
|
|
}
|
|
|
|
.swiper-pagination {
|
|
padding-top: 1.75rem;
|
|
}
|
|
|
|
.swiper-slide {
|
|
|
|
figure {
|
|
width: 100vw;
|
|
height: 60vh;
|
|
margin-bottom: 2rem;
|
|
|
|
figcaption {
|
|
position: absolute;
|
|
bottom: 5rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 100%;
|
|
padding: 0 2rem;
|
|
}
|
|
}
|
|
}
|
|
} |