/* =========================================================
   VRID REASONS
========================================================= */

.vrid-reasons {
  position: relative;
  padding: 110px 0;
  background: #f3f3f3;

  overflow: hidden;
}

/* =========================================================
   GLOBAL
========================================================= */

.vrid-reasons *,
.vrid-reasons *::before,
.vrid-reasons *::after {
  box-sizing: border-box;
}

/* =========================================================
   CONTAINER
========================================================= */

.vrid-reasons__container {
  position: relative;

  width: 100%;
  max-width: 1240px;

  margin: 0 auto;
  padding: 0 60px;

  overflow: hidden;
}

/* =========================================================
   TITLE
========================================================= */

.vrid-reasons__title {
  margin: 0 0 70px;
  font-family: "Merriweather", serif;
  text-align: center;
}

.vrid-reasons__title-light {
  display: block;

  margin-bottom: 14px;

  font-size: 12px;
  font-weight: 600;

  letter-spacing: 0.22em;
  text-transform: uppercase;

  color: #9ca3af;
}

.vrid-reasons__title-regular {
  display: block;

  font-size: clamp(2.5rem, 4vw, 4.5rem);
  line-height: 1;
  font-weight: 700;
  font-size: 50px;

  letter-spacing: -0.05em;

  color: #111827;
}

/* =========================================================
   SLIDER
========================================================= */

.vrid-reasons__slider {
  display: flex;

  width: 100%;

  transition: transform 0.6s ease;
}

/* =========================================================
   CARD
========================================================= */

.vrid-reasons__card {
  flex: 0 0 100%;

  width: 100%;
  min-width: 100%;

  padding: 0 80px;

  text-align: center;
}

/* =========================================================
   NUMBER
========================================================= */

.vrid-reasons__number {
  margin-bottom: 26px;

  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 0.9;
  font-weight: 700;

  letter-spacing: -0.08em;

  color: #b91c1c;
}

/* =========================================================
   CONTENT
========================================================= */

.vrid-reasons__heading {
  margin: 0 0 18px;

  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.2;
  font-weight: 600;

  color: #111827;
}

.vrid-reasons__description {
  max-width: 760px;

  margin: 0 auto;

  font-size: 17px;
  line-height: 1.9;

  color: #6b7280;
}

/* =========================================================
   CONTROLS
========================================================= */

.vrid-reasons__control {
  position: absolute;
  top: 50%;

  z-index: 10;

  width: 48px;
  height: 48px;

  border: 1px solid #e5e7eb;
  border-radius: 50%;

  background: #ffffff;

  cursor: pointer;

  transform: translateY(-50%);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}

.vrid-reasons__control:hover {
  background: #f9fafb;

  border-color: #d1d5db;

  transform: translateY(-50%) scale(1.04);
}

.vrid-reasons__control img {
  width: 14px;
}

.vrid-reasons__control--prev {
  left: 0;
}

.vrid-reasons__control--prev img {
  transform: rotate(180deg);
}

.vrid-reasons__control--next {
  right: 0;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {
  .vrid-reasons {
    padding: 90px 0;
  }

  .vrid-reasons__container {
    padding: 0 32px;
  }

  .vrid-reasons__card {
    padding: 0 40px;
  }

  .vrid-reasons__description {
    font-size: 16px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {
  .vrid-reasons {
    padding: 72px 0;
  }

  .vrid-reasons__container {
    padding: 0 20px;
  }

  .vrid-reasons__title {
    margin-bottom: 48px;
  }

  .vrid-reasons__title-light {
    font-size: 11px;
  }

  .vrid-reasons__title-regular {
    font-size: 2.3rem;
  }

  .vrid-reasons__slider {
    overflow-x: auto;

    scroll-snap-type: x mandatory;

    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .vrid-reasons__slider::-webkit-scrollbar {
    display: none;
  }

  .vrid-reasons__card {
    padding: 0;

    scroll-snap-align: start;
  }

  .vrid-reasons__number {
    margin-bottom: 18px;

    font-size: 3.8rem;
  }

  .vrid-reasons__heading {
    margin-bottom: 14px;

    size: 1.3rem;
  }

  .vrid-reasons__description {
    font-size: 15px;
    line-height: 1.8;
  }

  .vrid-reasons__control {
    display: none;
  }
}