/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** 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%;
        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*/