63 lines
1.1 KiB
CSS
63 lines
1.1 KiB
CSS
.root {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
|
|
}
|
|
|
|
.title {
|
|
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
|
|
font-family:
|
|
Greycliff CF,
|
|
var(--mantine-font-family);
|
|
}
|
|
|
|
|
|
.mobileImage {
|
|
@media (min-width: 48em) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.desktopImage {
|
|
object-fit: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
@media (max-width: 47.99em) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.carousel-wrapper {
|
|
width: 100%;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.gradient-control {
|
|
width: 15%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 2;
|
|
background-color: transparent;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0.6;
|
|
color: white;
|
|
pointer-events: all;
|
|
}
|
|
|
|
/* First control is left */
|
|
.gradient-control:first-of-type {
|
|
left: 0;
|
|
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
|
|
}
|
|
|
|
/* Last control is right */
|
|
.gradient-control:last-of-type {
|
|
right: 0;
|
|
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
|
|
}
|