src/wolnelektury/static/2022/styles/layout/_quotes.scss

   1 .l-quotes {
   2   width: 100%;
   3   max-width: 1140px;
   4   margin-top: 58px;
   5   position: relative;
   6   overflow: hidden;
   7   padding-bottom: 40px;
   8
   9   @include rwd(tablet) {
  10     margin-top: 24px;
  11   }
  12
  13   &:after {
  14     content: "";
  15     display: block;
  16     pointer-events: none;
  17     background: url("../images/quotes-slider-bg-right.svg") center no-repeat;
  18     width: 170px;
  19     height: 407px;
  20     position: absolute;
  21     right: -150px;
  22     top: 0;
  23     z-index: $middle-layer;
  24
  25     @include rwd(tablet) {
  26       display: none;
  27     }
  28   }
  29
  30   &:before {
  31     content: "";
  32     display: block;
  33     pointer-events: none;
  34     background: url("../images/quotes-slider-bg-left.svg") center no-repeat;
  35     width: 170px;
  36     height: 407px;
  37     position: absolute;
  38     left: -150px;
  39     top: 0;
  40     z-index: $middle-layer;
  41
  42     @include rwd(tablet) {
  43       display: none;
  44     }
  45   }
  46
  47   .slick-dots {
  48     bottom: 0;
  49     li button:before {
  50       border: 1px solid #007880;
  51     }
  52   }
  53 }
  54
  55 .l-quotes__item {
  56   outline: 0;
  57   background: #E1F1F2;
  58   border-radius: 10px;
  59   width: 558px;
  60   margin-top: 50px;
  61   margin-left: 32px;
  62   margin-right: 32px;
  63   padding-left: 32px;
  64   padding-right: 32px;
  65   padding-bottom: 32px;
  66
  67   @include rwd(tablet) {
  68     margin-right: 0;
  69     margin-left: 0;
  70   }
  71
  72   img {
  73     margin: 0 auto;
  74     border-radius: 50%;
  75     overflow: hidden;
  76     font-size: 0;
  77     margin-top: -50px;
  78
  79     @include rwd(tablet) {
  80       width: 48px;
  81       height: 48px;
  82       margin-top: -24px;
  83     }
  84   }
  85
  86   h4 {
  87     margin-top: 10px;
  88     font-weight: $semibold;
  89     @include font-size(25px);
  90     line-height: 140%;
  91     text-align: center;
  92     letter-spacing: -0.01em;
  93     color: #474747;
  94
  95     @include rwd(tablet) {
  96       margin-top: 5px;
  97       @include font-size(14px);
  98     }
  99   }
 100
 101   p {
 102     margin-top: 24px;
 103     font-style: italic;
 104     font-weight: $regular;
 105     @include font-size(26px);
 106     line-height: 140%;
 107     text-align: center;
 108     letter-spacing: -0.02em;
 109     color: #083F4D;
 110
 111     @include rwd(tablet) {
 112       margin-top: 12px;
 113       @include font-size(20px);
 114     }
 115   }
 116 }