/*
  Nõustamine – breakpoints (add styles in RESPONSIVE section below)
  sm   40rem  /  640px
  md   48rem  /  768px
  lg   64rem  / 1024px
  xl   80rem  / 1280px
  2xl  96rem  / 1536px
*/

/* ========== BASE (default / mobile) ========== */

.noustamine-eraisikule,
.vaimse-tervise-tugiisik,
.english-lessons-container,
.noustamine-cta {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.counselling-card-container,
.counseling-card-container {
  max-width: 1026px;
  flex: 1;
}
.counselling-card,
.counseling-card {
  flex: 1;
}
.counselling-card-header,
.counseling-card-header {
  width: 100%;
}
.mentoring-card-container {
  max-width: 1536px;
  align-items: stretch !important;
  flex: 1;
}
.mentoring-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}
.mentoring-card .btn-primary {
  margin-top: auto;
  padding-top: 24px;
}
.mentoring-card-featured:before {
  content: "Most Favorite";
  text-align: center;
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #59804A;
  font-size: 12px;
  padding: 6px 12px 6px 12px;
  border-radius: 16px;
  color: #C1D4BA;
}
.english-lessons-container hr {
  border: 0.5px solid #D5D7D3;
  width: 100%;
}
.english-lessons-card {
  max-width: 1024px;
}
.english-lessons-card .btn-primary {
  width: 100%;
}

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

/* --- max sm (40rem) --- */
@media (max-width: 40rem) {
  .mentoring-card-container {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  .counselling-card-container,
  .counseling-card-container {
    flex-direction: column;
  }
  .english-lessons-content {
    display: block !important;
  }
  .english-lessons-card {
    padding: 24px !important;
  }
}

/* --- max md (48rem) --- */
@media (max-width: 48rem) {
  /* noustamine styles for md and below */
}

/* --- min lg (64rem) --- */
@media (min-width: 64rem) {
  .noustamine-eraisikule,
  .vaimse-tervise-tugiisik,
  .english-lessons-container,
  .noustamine-cta {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }
  .mentoring-card-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* --- min sm (40rem) --- */
@media (min-width: 40rem) {
  /* noustamine styles for sm and up */
}

/* --- min md (48rem) --- */
@media (min-width: 48rem) {
  /* noustamine styles for md and up */
}

/* --- min xl (80rem) --- */
@media (min-width: 80rem) {
  /* noustamine styles for xl and up */
}

/* --- min 2xl (96rem) --- */
@media (min-width: 96rem) {
  /* noustamine styles for 2xl and up */
}