@import 'utils/colors.sass'
@import 'blocks/mixins.sass'

.Banner
  border-bottom: 1px solid $border-color
  text-align: center
  +size(small)

  @media screen and (min-width: 800px)
    background: url('../../images/jamstack-conf.svg')
    background-position: center center
    background-size: auto 50px

  .wrap
    display: flex
    align-items: center
    justify-content: center
    padding: 0 20px

.Banner__inner

  p
    color: black
    background-color: white
    display: inline-block
    padding: 12px 0

    @media screen and (max-width: 1019px)
      display: block
      max-width: 600px
      margin: 0 auto

  strong
    font-weight: 500

  a
    color: #fb53dc
    text-decoration: none

    &:hover
      text-decoration: underline

a.Banner__button
  @media screen and (min-width: 1020px)
    background: linear-gradient(90deg, #fb53dc 0, #ff2882 50%, #37dcf1 0, #5328ff)
    background-size: 205% 100%
    transition: 0.225s cubic-bezier(0.55, 0.03, 0.585, 0.22)
    background-position: 99%
    color: white
    padding: 4px 15px
    border-radius: 60px
    color: white
    text-decoration: none
    display: inline-block
    margin-left: 15px

    span
      display: none

    &:hover
      background-position: 0 99%
      text-decoration: none
