/* breakpoints */
.element__bg {
  background-color: var(--clr-primary);
  border-radius: var(--border-radius-xxl);
  padding: 1rem;
  padding-block: 3rem;
  --font-clr: var(--white);
}
@media (min-width: 992px) {
  .element__bg {
    padding-block: 5rem;
  }
}
@media (min-width: 1400px) {
  .element__bg {
    padding-block: 8rem;
  }
}
.element__bg .cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.element__bg .cards .card {
  border: none;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-xl);
  display: flex;
  gap: 1.5rem;
  flex: 1;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .element__bg .cards .card {
    gap: 2rem;
  }
}
.element__bg .cards .card:first-of-type {
  flex-basis: 100%;
  flex-direction: row;
}
@media (max-width: 767.98px) {
  .element__bg .cards .card:first-of-type {
    flex-direction: column;
  }
}
@media (max-width: 767.98px) {
  .element__bg .cards .card {
    flex-basis: 100%;
  }
  .element__bg .cards .card img {
    max-width: 100%;
    height: auto;
  }
}
.element__bg .cards .card__content {
  padding: 1.5rem;
}
@media (min-width: 768px) {
  .element__bg .cards .card__content {
    padding: 2rem;
  }
}
/*# sourceMappingURL=data:application/json,%7B%22version%22%3A3%2C%22sources%22%3A%5B%22%2Fthemes%2Fthermotex24%2Fscss%2Felements%2F_cardsd.scss%22%2C%22%2Fthemes%2Fthermotex24%2Fscss%2Felements%2F..%2Fsettings%2Fbreakpoints.scss%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22AAAA%3BAAEA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BACuCI%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BADxBF%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAKE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BACmBA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BADNE%3BAAAA%3BAAAA%3BAAAA%3BACMF%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BADKI%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMF%3BAAAA%3BAAAA%3BACXF%3BAAAA%3BAAAA%3BAAAA%3BAAAA%22%7D */