src/wolnelektury/static/2022/styles/components/_support.scss

   1 $green: #96C13D;
   2 $teal: #007880;
   3 $darkteal: #083F4D;
   4
   5
   6 .c-support {
   7   display: flex;
   8   flex-direction: column-reverse;
   9   margin-top: 50px;
  10   background: $darkteal;
  11   border-radius: 15px;
  12   overflow: hidden;
  13   justify-content: center;
  14   align-items: stretch;
  15
  16   @include rwd($break-flow) {
  17       flex-direction: row;
  18   }
  19
  20   h2 {
  21       margin: 0 auto 35px;
  22     font-style: italic;
  23     font-weight: 400;
  24     font-size: 34px;
  25     line-height: 47px;
  26     letter-spacing: -0.02em;
  27     color: #ffffff;
  28
  29     span {
  30         color: $green;
  31     }
  32   }
  33
  34   div {
  35       display: flex;
  36       flex-direction: column;
  37       justify-content: space-between;
  38       padding: 20px 30px 30px;
  39   }
  40
  41   .bg {
  42       flex-basis: 193px;
  43       flex-grow: 0;
  44       flex-shrink: 0;
  45       background-image: url('/static/2022/images/dziecko.jpeg');
  46       background-size: cover;
  47       background-position: 50% 20%;
  48
  49       @include rwd($break-flow) {
  50           flex-basis: 270px;
  51       }
  52   }
  53
  54   a {
  55     width: 100%;
  56     font-weight: 600;
  57     font-size: 22px;
  58     line-height: 28px;
  59     color: $darkteal;
  60     display: flex;
  61     align-items: center;
  62     justify-content: center;
  63     text-align: center;
  64     padding: 12px 22px 14px 28px;
  65     background: $color-yellow;
  66     border-radius: 5px;
  67     transition: all $ease-dynamic 350ms;
  68
  69     &:hover {
  70       background: $green;
  71     }
  72   }
  73 }
  74
  75 .c-support__content {
  76   padding: 16px 32px 30px 32px;
  77 }