/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/postcss-loader/dist/cjs.js!./src/styles/section/example.scss ***!
  \****************************************************************************************************************************************************************************************************************************/
/*images*/
.example__section .section__header {
  max-width: 53.75rem; }

.example__img {
  width: 100%;
  aspect-ratio: 1/1;
  padding: 2.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #FAFAFA; }
  .example__img picture {
    display: inline-block;
    text-align: center; }
    .example__img picture img {
      max-width: 100%;
      max-height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
      -webkit-box-shadow: 1px 4px 9px 0px #04040405, 5px 16px 17px 0px #04040405, 11px 37px 23px 0px #04040403;
      box-shadow: 1px 4px 9px 0px #04040405, 5px 16px 17px 0px #04040405, 11px 37px 23px 0px #04040403; }
  @media only screen and (max-width: 767px) {
    .example__img {
      max-width: 100%;
      aspect-ratio: initial;
      padding: 30px; } }

.example__row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2.5rem; }
  @media only screen and (max-width: 767px) {
    .example__row {
      grid-template-columns: repeat(1, 1fr);
      gap: 24px; } }

.example__list ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 3.5rem;
  list-style: none;
  counter-reset: step; }
  .example__list ul li {
    padding-left: 2.875rem;
    font-size: 1rem;
    line-height: 160%;
    position: relative;
    counter-increment: step; }
    .example__list ul li:before {
      content: counter(step, decimal-leading-zero);
      position: absolute;
      left: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      width: 1.875rem;
      height: 1.875rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      vertical-align: center;
      border: 1px solid var(--color-purple50);
      border-radius: 50%;
      font-size: 0.875rem;
      color: var(--color-purple50);
      line-height: 1;
      -webkit-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out; }
    .example__list ul li:hover:before {
      background-color: var(--color-purple50);
      color: var(--color-white); }
  @media only screen and (max-width: 767px) {
    .example__list ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      gap: 20px; }
      .example__list ul li {
        white-space: nowrap; }
        .example__list ul li:last-child {
          padding-right: 12px; } }

@media only screen and (max-width: 767px) {
  .example__list {
    overflow: auto;
    padding: 10px 12px;
    margin: 0 -12px;
    width: calc(100% + 24px); } }


/*# sourceMappingURL=section-example.css.map*/