/*
--------------------------------------
Featured products
--------------------------------------
*/

.s-featured-products {
  overflow : hidden;
  padding  : 3em 0 5em 0;
}

.s-featured-products-top.container-primary {
  display               : grid;
  grid-template-columns : 80% 20%;
}

.s-featured-products-top .fake-arrows {
  display         : flex;
  justify-content : center;
  gap             : 25px;
}

.s-featured-products-top .fake-arrow {
  cursor : pointer;
}

/* Fake arrows */

.fake-arrow {
  transition : opacity 0.3s ease, cursor 0.3s ease;
  cursor     : pointer;
}

.fake-arrow.fake-arrow--disabled {
  opacity        : 0.3;
  cursor         : default;
  pointer-events : none;
}

/*Swiper*/

.s-featured-products .swiper-container {
  overflow : visible;
}

.featuredproducts-swiper-button {
  opacity    : 0;
  visibility : hidden;
}

/*
--------------------------------------
Categories
--------------------------------------
*/

.s-home-categories {
  display        : flex;
  flex-direction : column;
  row-gap        : calc(30px + (60 - 30) * ((100vw - 320px) / (1920 - 320)));
}

/*title*/

.s-home-categories__title {
  display         : flex;
  justify-content : center;
  text-align      : center;
}

.s-home-categories__title .section__title {
  width : calc(300px + (530 - 300) * ((100vw - 320px) / (1920 - 320)));
}

/*cards*/

.home-categories {
  display         : flex;
  flex-wrap       : wrap;
  justify-content : center;
  gap             : 5px;
}

.home-category-card {
  position : relative;
}

/*scale img*/

.home-categories-card__link {
  position : relative;
  overflow : hidden;
}

.home-categories-card__link img {
  max-width  : 100%;
  display    : block;
  object-fit : cover;
  transform  : scale(1);
  transition : all 0.75s ease-in-out;
}

.home-categories-card__link:hover img {
  transform : scale(1.035);
}

/*img*/

.home-categories .home-categories-card__overlay {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  z-index    : 1;
  background : linear-gradient(180deg, rgba(50, 29, 22, 0.00) 75%, #321D16 100%);
}

.home-categories-card__img img {
  object-fit : cover;
  width      : calc(170px + (620 - 170) * ((100vw - 320px) / (1920 - 320)));
  height     : calc(370px + (600 - 370) * ((100vw - 320px) / (1920 - 320)));
}

/*content*/

.home-categories-card__content {
  position   : absolute;
  z-index    : 2;
  left       : 0;
  right      : 0;
  bottom     : 30px;
  text-align : center;
  width      : 100%;
  padding    : 0 20px;
}

.home-categories-card__content * {
  color : #fff;
}

/*title*/

.home-categories-card__content-title {
  font-size     : calc(22px + (28 - 22) * ((100vw - 320px) / (1920 - 320)));
  font-weight   : 500;
  margin        : 0;
  margin-bottom : 10px;
}

/*link*/

.home-categories-card__content-discover {
  font-size       : 15px;
  font-weight     : 400;
  text-decoration : underline;
  transition      : all 0.35s ease;
}

.home-categories-card__content-discover:hover,
.home-categories-card__content-discover:focus {
  color           : var(--color-secondary);
  text-decoration : underline;
}

/*
--------------------------------------
Blog
--------------------------------------
*/

.s-home-blog {
  display        : flex;
  flex-direction : column;
  padding        : calc(40px + (80 - 40) * ((100vw - 320px) / (1920 - 320))) 0;
  overflow       : hidden;
}

/*title*/

.s-home-blog__title-container {
  display         : flex;
  justify-content : center;
}

.s-home-blog__title-container .section__title {
  display        : flex;
  flex-direction : column-reverse;
  row-gap        : 0;
}

/*
--------------------------------------
Posts
--------------------------------------
*/

.s-home-blog__posts-container {
  position    : relative;
  padding-top : calc(16px + (32 - 16) * ((100vw - 320px) / (1920 - 320)));
}

/*swiper*/

.s-home-blog__slider-wrapper {
  position  : relative;
  max-width : 95%;
  margin    : 0 auto;
}

.s-home-blog__posts-container {
  overflow : hidden;
}

.s-home-blog__slider-wrapper .swiper-button-prev {
  left : calc(0px + (-80 - 0) * ((100vw - 320px) / (1920 - 320)));
}

.s-home-blog__slider-wrapper .swiper-button-next {
  right : calc(0px + (-80 - 0) * ((100vw - 320px) / (1920 - 320)));
}

.s-home-blog__post {
  display : flex;
}

.s-home-blog__slider-wrapper {
  position       : relative;
  padding-bottom : 30px;
}

.s-home-blog__posts-container .swiper-wrapper {
  display     : flex;
  align-items : stretch;
}

/*content*/

.s-home-blog__post-content-container {
  display         : flex;
  flex-direction  : column;
  justify-content : center;
  background      : var(--color-tertiary);
  padding         : calc(28px + (48 - 28) * ((100vw - 320px) / (1920 - 320))) calc(40px + (80 - 40) * ((100vw - 320px) / (1920 - 320)));
}

.s-home-blog__post-content-inner {
  display         : flex;
  flex-direction  : column;
  justify-content : center;
  row-gap         : 35px;
  flex            : 1;
}

/*img*/

.s-home-blog__post-img-container img {
  object-fit : cover;
  width      : 100%;
  height     : 100%;
}

/*title*/

.s-home-blog__post-title {
  font-size      : calc(20px + (30 - 20) * ((100vw - 320px) / (1920 - 320)));
  font-weight    : 300;
  color          : #fff;
  line-height    : 130%;
  letter-spacing : 0.5px;
}

/*excerpt*/

.s-home-blog__post-excerpt {
  font-size      : 15px;
  font-weight    : 300;
  color          : #fff;
  line-height    : 145%;
  letter-spacing : 0.5px;
}

/*
--------------------------------------
À propos
--------------------------------------
*/

.home-about .home-about__element {
  display               : grid;
  grid-template-columns : 1fr;
}

.home-about__element-content__inner {
  text-align : center;
  max-width  : 95%;
  margin     : auto;
}

/*img*/

.home-about__element-img img {
  object-fit : cover;
  height     : 100%;
}

/*content*/

.home-about .home-about__element-content {
  display         : flex;
  flex-direction  : column;
  justify-content : center;
  padding         : 10px;
}

/*subhead*/

.home-about__element-subhead {
  font-size      : 12px;
  font-weight    : 400;
  color          : #fff;
  text-align     : center;
  line-height    : 150%;
  letter-spacing : 2px;
  text-transform : uppercase;
}

/*title*/

.home-about__element-title {
  font-size      : calc(20px + (32 - 20) * ((100vw - 320px) / (1920 - 320)));
  font-weight    : 300;
  color          : #fff;
  line-height    : 120%;
  letter-spacing : 0.5px;
}

/*description*/

.home-about__element-description {
  font-size      : calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
  font-weight    : 300;
  color          : rgba(255, 255, 255, 0.70);
  line-height    : 145%;
  letter-spacing : 0.5px;
  padding-top    : calc(20px + (32 - 20) * ((100vw - 320px) / (1920 - 320)));
}

/*link*/

.home-about__element-link-container {
  padding-top : calc(25px + (44 - 25) * ((100vw - 320px) / (1920 - 320)));
}

.home-about__element-link {
  display        : inline-flex;
  font-size      : 12px;
  font-weight    : 500;
  color          : #fff;
  border         : 1px solid #fff;
  line-height    : 26px;
  letter-spacing : 1.8px;
  text-align     : center;
  text-transform : uppercase;
  transition     : all 0.35s ease;
  padding        : 13px 16px;
}

.home-about__element-link:hover,
.home-about__element-link:focus {
  background-color : #fff;
  color            : #000;
}

/*
--------------------------------------
FAQ
--------------------------------------
*/

.home-faq__inner {
  display        : flex;
  flex-direction : column;
  row-gap        : 30px;
  color          : var(--color-quinary);
  max-width      : 88%;
  padding        : calc(40px + (100 - 40) * ((100vw - 320px) / (1920 - 320))) 0;
  margin         : auto;
}

/*question*/

.home-faq__question-container {
  margin-bottom : 15px;
}

.home-faq__question {
  font-size      : 19px;
  font-weight    : 600;
  line-height    : 135%;
  letter-spacing : 0.19px;
}

/*answer*/

.home-faq__answer {
  font-size      : 14px;
  font-weight    : 300;
  line-height    : 150%;
  letter-spacing : 0.5px;
}

.home-faq__answer ul {
  list-style           : initial;
  padding-inline-start : 40px;
}