}
}
+@media only screen and (min-width: 1919px) {
+ .elementor-element-68240c5 {
+ margin-bottom: 50px !important;
+ }
+}
+
+.link-carousel {
+ max-width: 1463px;
+ margin: 0 auto;
+}
+
+@media only screen and (min-width: 1919px) {
+ .link-carousel {
+ padding-bottom: 100px;
+ }
+}
+
.link-carousel-item {
height: auto !important;
display: flex;
cursor: pointer;
}
-@media only screen and (min-width: 500px) {
- .link-carousel-item {
- border-right: 1px solid rgba(255,255,255,0.2);
- }
-}
-
.link-carousel-item-image {
flex-grow: 1;
- padding: 2.5em 1em 1em;
+ max-height: 180px;
}
.link-carousel-item-image img {
- width: 50%;
+ width: 100%;
+ height: 100%;
margin: 0 auto;
}
font-size: 26px;
font-size: 1.181818181818182rem;
transition: background-color 0.2s ease-out;
-}
-
-.link-carousel-item:hover .link-carousel-item-title {
- background-color: #FFBF29;
+ font-weight: 100;
}
.link-carousel-prev,
+.elementor-element-68240c5
+ +above(1919px)
+ margin-bottom: 50px !important
+
.link-carousel
+ max-width: 1463px;
+ margin: 0 auto;
+ +above(1919px)
+ padding-bottom: 100px
&-item
height: auto !important // Needed to make equal heights, otherwise Swiper's 100% height breaks this
cursor: pointer
+above(500px)
- border-right: 1px solid rgba(#fff, 0.2)
+ //border-right: 1px solid rgba(#fff, 0.2)
&-image
flex-grow: 1
- padding: 2.5em 1em 1em
+ //padding: 2.5em 1em 1em
+ max-height: 180px
img
- width: 50%
+ width: 100%
+ height 100%
margin: 0 auto
&-title
padding: 1em
font-size: 26px
transition: background-color 0.2s ease-out
-
- .link-carousel-item:hover &
- @apply bg-yellow
-
+ font-weight: 100
&-prev, &-next
position: absolute
'loop' => true,
'breakpoints' => [
500 => [
+ 'spaceBetween' => 0,
'slidesPerView' => 2 // 500px -> 767px
],
768 => [
+ 'spaceBetween' => 0,
'slidesPerView' => 3 // 768px -> 1199px
],
1200 => [
- 'slidesPerView' => 4 // >= 1200px
+ 'slidesPerView' => 3 // >= 1200px
],
+ 1600 => [
+ 'slidesPerView' => 3, // >= 1200px
+ 'spaceBetween' => 214 // >= 1600px
+ ]
],
'navigation' => [
'nextEl' => '.link-carousel-next',
<div class="swiper-wrapper">
@foreach ($links as $link)
@php($linkurl = str_replace('/en','',$link['link']['url']))
- <a class="link-carousel-item swiper-slide" href="{{ $linkurl }}">
+ @if(!$link['link']['url'])
+ <a class="link-carousel-item swiper-slide" href="{{ $linkurl }}">
+ @else
+ <div class="link-carousel-item swiper-slide" style="cursor: auto">
+ @endif
<div class="link-carousel-item-image">
<img src="{{ $link['image']['url'] }}" alt="{{ $link['title'] }}">
</div>
<h4 class="link-carousel-item-title">{{ $link['title'] }}</h4>
- </a>
+ @if(!$link['link']['url'])
+ </a>
+ @else
+ </div>
+ @endif
@endforeach
</div>
<div class="link-carousel-prev">@svg('carousel-prev', 'stroke-current')</div>