/* ==========================================================================
   CONTACT MAIN CONTAINERS
   ========================================================================== */
.contact {
  padding: 3rem 1rem;
  background: linear-gradient(6.65deg, #53504f -11.73%, #0f0f0f 152.33%);
  align-items: center;
  gap: 0.5rem;
}

/* === Text and description === */
.contact__content {
  max-width: 43.1875rem;
  align-items: center;
  color: #ffffff;
  text-align: center;
}

.contact__title {
  /* font-size: var(--fs-lg);
  line-height: 2.5rem; */
  font-size: clamp(
    var(--fs-lg),
    calc(var(--fs-lg) + (var(--fs-xl) - var(--fs-lg)) * (100vw / 50rem)),
    var(--fs-xl)
  );
  line-height: clamp(
    2.5rem,
    calc(2.5rem + (2.875rem - 2.5rem) * (100vw / 50rem)),
    2.875rem
  );
}

.contact__description {
  font-size: var(--fs-md);
}

/* ==========================================================================
   MEDIA QUERIES (Tablet Overrides)
   ========================================================================== */
@media (min-width: 50rem) {
  .contact {
    padding: 4rem 3.375rem;
  }

  /* .contact__title {
    font-size: var(--fs-xl);
    line-height: 2.875rem;
  } */

  .contact__description {
    font-size: var(--fs-lg);
    line-height: 2.5rem;
  }
}

/* ==========================================================================
   MEDIA QUERIES (Desktop Overrides)
   ========================================================================== */
@media (min-width: 90rem) {
  .contact {
    padding: 6.6875rem var(--horizontal-padding-desktop);
  }
}