/* ========================================
   PAGE RESSOURCES
======================================== */

.newsletter-form {
  max-width: 700px;

  margin: 40px auto 0;

  display: flex;
  gap: 15px;

  align-items: stretch;
}

.newsletter-form .form-group {
  flex: 1;
}

.newsletter-form input {
  height: 52px;
}

/* ========================================
   ARTICLES
======================================== */

.card .badge {
  margin-bottom: 20px;
}

.card a {
  display: inline-flex;

  margin-top: 20px;

  color: var(--color-primary);

  font-weight: 700;

  transition: var(--transition);
}

.card a:hover {
  opacity: .75;
}

/* ========================================
   CATEGORIES
======================================== */

.cards-grid .card {
  height: 100%;
}

.cards-grid .card h3 {
  margin-bottom: 12px;
}

/* ========================================
   RESSOURCES PREMIUM
======================================== */

.section .card {
  position: relative;
}

.section .card:hover {
  transform: translateY(-4px);
}

/* ========================================
   CTA NEWSLETTER
======================================== */

.cta-box .newsletter-form {
  margin-top: 35px;
}

.cta-box .newsletter-form input {
  background: var(--color-white);

  border: 1px solid transparent;
}

.cta-box .newsletter-form input:focus {
  border-color: var(--color-primary);
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 768px) {

  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-form .btn {
    width: 100%;
  }

}