:root {
    --container-width : 80vw;
    --card__container-height : 100%;
    --slider-max-height-xxl : 750px;
    --slider-max-height-lg : 700px;
    --transition-duration : 0.8s;
    --transition-bottom : transition: bottom var( --transition-duration) ease-in;

}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
  background: #363636;
  background: -webkit-radial-gradient(top left, #363636, #090909);
  background: -moz-radial-gradient(top left, #363636, #090909);
  background: radial-gradient(to bottom right, #363636, #090909);
  /* border: 2px solid blue; */
}

.container {
  max-width: 80vw;
  margin: 0 auto;
}

.card__container {
  height: 100%;
}

/* NAVIGATION */

.slider-nav__item {

  align-items: end;
  justify-content: center;
  pointer-events: auto; /* Trigger */
  cursor: pointer;
  transition: all 0.3s ease-out;
}

.card__article {
  /* border: 2px solid red; */
}

/* SWIPER */
.swiper-slide {
  width: auto;
  max-height: 550px;
}

.swiper-wrapper {
  display: flex;
  align-items: center;
}

/* ANIMATION */
.card__article--header {
  bottom: 190px;
  left: 50%;
  transform: translateX(-50%);
  transition: bottom 0.8s ease-in;
}



@media screen and (min-width: 1280px) {
  .swiper-slide {
    width: auto;
    max-height: 700px;
  }

  .card__article--header {
    bottom: 205px;
  }

  .card__article:not(.swiper-slide-active) .card__article--header {
    bottom: 100px;
  }
}


@media screen and (min-width: 1920px) {
  .swiper-slide {
    width: auto;
    max-height: 600px;
  }

  .card__article--header {
    bottom: 215px;
  }
  
}