.massivesecurity-courses-grid {
  padding-bottom: clamp(60px, 40 * (100vw - 375px) / 905 + 60px, 100px);
}
.massivesecurity-courses-grid .row-courses {
  --bs-gutter-y: 24px;
}
.massivesecurity-courses-grid .row-courses .course-detail {
  display: block;
  padding: clamp(24px, 20 * (100vw - 375px) / 905 + 24px, 44px);
  border: 1px solid rgb(229, 229, 229);
  border-radius: 15px;
}
.massivesecurity-courses-grid .row-courses .course-detail .title {
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: clamp(18px, 6 * (100vw - 375px) / 905 + 18px, 24px);
  line-height: 140%;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgb(229, 229, 229);
  color: var(--color-dark);
  transition: color var(--transition);
}
.massivesecurity-courses-grid .row-courses .course-detail .title:hover {
  color: var(--color-yellow);
}
.massivesecurity-courses-grid .row-courses .course-detail .description {
  min-height: 170px;
  font-family: var(--font-rubik);
  font-size: clamp(16px, 2 * (100vw - 375px) / 905 + 16px, 18px);
  line-height: 160%;
  color: rgb(42, 42, 42);
  margin-bottom: 22px;
}
.massivesecurity-courses-grid .row-courses .course-detail .background-cover {
  aspect-ratio: 498/324;
  margin-bottom: 22px;
  border-radius: 15px;
}
.massivesecurity-courses-grid .row-courses .course-detail .numbers {
  display: flex;
  justify-content: center;
  gap: clamp(40px, 8 * (100vw - 375px) / 905 + 40px, 48px);
  margin-bottom: clamp(30px, 32 * (100vw - 375px) / 905 + 30px, 62px);
}
.massivesecurity-courses-grid .row-courses .course-detail .numbers .number {
  display: flex;
  gap: 20px;
  align-items: center;
}
.massivesecurity-courses-grid .row-courses .course-detail .numbers .number .value {
  font-family: var(--font-manrope);
  font-weight: 600;
  font-size: clamp(24px, 16 * (100vw - 375px) / 905 + 24px, 40px);
  line-height: 140%;
  color: var(--color-dark);
}
.massivesecurity-courses-grid .row-courses .course-detail .numbers .number .text {
  color: rgb(123, 123, 123);
  font-family: var(--font-rubik);
  font-size: clamp(12px, 2 * (100vw - 375px) / 905 + 12px, 14px);
  line-height: 160%;
}
.massivesecurity-courses-grid .row-courses .course-detail > .row {
  --bs-gutter-x: 16px;
}
.massivesecurity-courses-grid .row-courses .course-detail > .row .firm-logo {
  width: 64px;
  height: auto;
}
.massivesecurity-courses-grid .row-courses .course-detail > .row .price {
  color: var(--color-dark);
  margin-bottom: 4px;
  font-family: var(--font-rubik);
  font-size: clamp(16px, 2 * (100vw - 375px) / 905 + 16px, 18px);
  line-height: 160%;
  text-transform: uppercase;
}
.massivesecurity-courses-grid .row-courses .course-detail > .row .free-spots {
  color: rgb(123, 123, 123);
  font-family: var(--font-rubik);
  font-size: clamp(11px, 1 * (100vw - 375px) / 905 + 11px, 12px);
  line-height: 140%;
}
.massivesecurity-courses-grid .row-courses .course-detail > .row .like-button {
  height: clamp(48px, 16 * (100vw - 375px) / 905 + 48px, 64px);
  width: clamp(48px, 16 * (100vw - 375px) / 905 + 48px, 64px);
  background-color: var(--color-yellow);
  position: relative;
  border-radius: 15px;
  border: 1px solid var(--color-yellow);
  transition: background-color var(--transition);
}
.massivesecurity-courses-grid .row-courses .course-detail > .row .like-button svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.massivesecurity-courses-grid .row-courses .course-detail > .row .like-button svg path {
  transition: stroke var(--transition);
}
.massivesecurity-courses-grid .row-courses .course-detail > .row .like-button:hover {
  background-color: rgb(15, 15, 15);
}
.massivesecurity-courses-grid .row-courses .course-detail > .row .like-button:hover svg path {
  stroke: var(--color-yellow);
}
/*# sourceMappingURL=courses-grid.css.map */