/* stylelint-disable order/order */
/* stylelint-enable order/order */
/*
* Used to add the CSS Grid properties for the 12-column grid.
*
* @return string  The CSS Grid properties for the 12-column grid.
*/
/****************
 * Fonts
 *
 * The font settings are defined via the gulp figma task creates variables in the css/__base-includes/figma/_figma-font-styles.scss file based on the Figma file. Additional variables are defined here.
 ****************/
/****************
 * Colors
 *
 * The primary colors are defined via the gulp figma task creates variables in the css/__base-includes/figma/_figma-color-variables.scss file based on the Figma file. Additional variables are defined here.
 ****************/
/****************
 * Effects
 ****************/
/****************
 * Grid Settings
 ****************/
/*
This file can be used for optional additions to the Figma-generated font style mixins in the figma/_figma-font-styles.scss file.

For example, if you want to add styles to the @overline mixin, just create a mixin here called @overline-custom and that CSS will be added to the primary mixin:

@mixin overline-custom() {
	font-weight: 700;
}
*/
.card-horizontal {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  padding: 48px 64px;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0 5px 20px 0 rgba(10, 17, 81, 0.1);
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 47.98rem) {
  .card-horizontal {
    flex-direction: column;
    gap: 10px;
    padding: 30px 20px;
  }
  .card-horizontal ul {
    padding-left: 30px;
  }
}
.card-horizontal:not(:last-child) {
  margin-bottom: 32px;
}
.card-horizontal__button {
  color: #0737cf !important;
  border: 1px solid #0737cf !important;
}
.card-horizontal__button:hover {
  color: #4bc031 !important;
  border-color: #4bc031 !important;
}
.card-horizontal h2 {
  max-width: 300px;
  color: #0a0028;
}
@media (max-width: 47.98rem) {
  .card-horizontal h2 {
    max-width: unset;
    font-size: 26px;
    line-height: 36px;
  }
}
.card-horizontal li {
  position: relative;
}
.card-horizontal li:not(:last-child) {
  margin-bottom: 32px;
}
@media (max-width: 47.98rem) {
  .card-horizontal li:not(:last-child) {
    margin-bottom: 18px;
  }
}
.card-horizontal li::before {
  content: "";
  position: absolute;
  left: -31px;
  top: 2px;
  display: block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' fill='%234BC031'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.1141 15.1206L16.6106 7L18 8.11156L10.2616 17.7846L6 13.523L7.2582 12.2648L10.1141 15.1206Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
}
.card-horizontal li ul {
  margin-top: 5px;
}
.card-horizontal li ul li {
  margin-bottom: 5px !important;
}
.card-horizontal li ul li::before {
  background-image: unset;
}
.card-horizontal li ul li::marker {
  color: #4BC031;
}
.card-horizontal__right-block {
  max-width: 65%;
  color: #0d0d0d;
}
@media (max-width: 47.98rem) {
  .card-horizontal__right-block {
    max-width: unset;
  }
}
@media (max-width: 47.98rem) {
  .card-horizontal__button--desktop {
    display: none;
  }
}
.card-horizontal__button--mobile {
  display: none;
}
@media (max-width: 47.98rem) {
  .card-horizontal__button--mobile {
    display: block;
  }
}