text: import styled from 'styled-components';
  import {Center,TextH2, TextTitleSmall,TextParagraph} from '../../../../assets/styles/mixins';
  import {COLOR_PRIMARY_LIGHT, BTN_PRIMARY, COLOR_LIGHT } from '../../../../assets/styles/variables';
  
  export let S = {};
  
  S.Steps = styled.div`
      max-width: 1080px;
      width: 100%;
      margin: 0 auto;
      padding-top: 160px;
      @media (max-width: 768px) {
          padding-top: 70px;
      }
  `;
  
  S.StepsTitle = styled.div`
      ${TextH2};
      color: ${COLOR_PRIMARY_LIGHT};
      text-align: center;
  `;
  
  S.StepsUnderTitle = styled.div`
      ${TextParagraph};
      color: ${COLOR_LIGHT};
      text-align: center;
  `;
  
  S.StepsList = styled.div`
      margin: 60px auto 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      width: 100%;
  
      @media (max-width: 600px) {
          flex-direction: column;
          margin-top: 40px;
      }
  `;
  
  S.StepsItem = styled.div`
      max-width: 180px;
      width: 100%;
      display: flex;
      flex-direction: column;
      @media (max-width: 600px) {
          max-width: 100%;
          margin-top: 20px;
      }
  `;
  
  S.StepsItemText = styled.div`
      color: ${COLOR_LIGHT};
      ${TextTitleSmall};
  `;
  
  S.StepsItemImg = styled.div`
      width: 100px;
      height: 100px;
      background: ${BTN_PRIMARY};
      border-radius: 25px;
      ${Center};
      font-family: Montserrat;
      font-style: normal;
      font-weight: bold;
      font-size: 36px;
      font-feature-settings: 'pnum' on, 'lnum' on;
      font-size: 28px;
      margin-bottom: 15px;
      color: ${COLOR_PRIMARY_LIGHT};
  `;
  
  