2025/src/styles/slider.css at main · JSConfCL/2025 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.embla {
  --slide-height: 19rem;

  --slide-spacing: 48px;

  --slide-size: 100%;
  --slide-size-sm: 50%;
  --slide-size-lg: calc(100% / var(--number-of-slides));

  --number-of-slides: 2;

  max-width: 1146px;
  width: 100%;
  margin: auto;
  padding-inline: 0px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);

  .embla-viewport {
    overflow: hidden;

    .embla-container {
      backface-visibility: hidden;
      display: flex;
      touch-action: pan-y pinch-zoom;
      margin-left: calc(var(--slide-spacing) * -1);

      .embla-slide {
        min-width: 0;
        flex: 0 0 var(--slide-size);
        padding-left: var(--slide-spacing);

        @media (width >= 768px) {
          flex: 0 0 var(--slide-size-sm);
        }

        @media (width >= 1200px) {
          flex: 0 0 var(--slide-size-lg);
        }

        img {
          border-radius: var(--rounded-lg);
        }
      }
    }
  }
}