section.historyHome
  @include spaceSection
  background-position: bottom
  background-repeat: no-repeat
  background-size: cover
  @media (max-width: 500px)
    background-image: none!important
  .container
    background-color: rgba(255, 255, 255, .5)
    border-radius: 30px
    align-items: center
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.1)
    padding: 2rem
    gap: 2rem
    .text
      align-items: flex-start
      h2
        //text-transform: uppercase
        span
          font-weight: 400
          font-size: 24px
      p
        margin: 1rem 0 2rem
      a
        background: $textBackColor
        align-items: center
        padding: 1rem 1.5rem
        border-radius: 30px
        gap: 0 .5rem
        transition: all .3s
        box-shadow: 0px 13px 27px -5px rgba(50,50,93,0.25) , 0px 8px 16px -8px rgba(0,0,0,0.3) , 0px -6px 16px -6px rgba(0,0,0,0.025) 
        span
          color: $textColor
        svg path
          stroke: $textColor
        @media (min-width: 1280px)
          &:hover
            gap: 0 .8rem
    &>img
      width: 100%
    @media (min-width: 768px)
      flex-direction: row-reverse
      justify-content: space-between
      gap: 0 5%
      padding: 3rem
      .text
        width: 65%
    @media (min-width: 1024px)
      width: 70%
      .text h2
        font-size: 28px
        span
          font-size: 28px
    @media (min-width: 1440px)
      width: 70%
      .text
        width: 55%
        h2
          font-size: 34px
          span
            font-size: 34px
    @media (min-width: 1600px)
      padding: 3rem 4rem
      .text h2
        font-size: 36px
        span
          font-size: 36px
    @media (min-width: 1900px)
      width: 65%