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

   1 .l-books__wrapper {
   2   margin-top: 27px;
   3   width: 100%;
   4   background-color: #F2F2F2;
   5   padding-top: 38px;
   6   position: relative;
   7   padding-bottom: 80px;
   8
   9   h2 {
  10     font-weight: 600;
  11     font-size: 31px;
  12     line-height: 140%;
  13     letter-spacing: -0.01em;
  14     color: #474747;
  15     margin-top: 0;
  16   }
  17 }
  18
  19 .l-books {
  20   display: flex;
  21   flex-wrap: wrap;
  22   margin-top: 36px;
  23 }
  24
  25 .l-books__item {
  26   background: #FFFFFF;
  27   border-radius: 9px;
  28   padding: 21px;
  29   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0);
  30
  31   transition: all $ease-dynamic 350ms;
  32
  33   &:not(:last-child) {
  34     margin-right: 20px;
  35   }
  36
  37   &:hover {
  38     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
  39   }
  40
  41   &.l-books__item--link {
  42     width: 212px;
  43     height: 350px;
  44
  45     background-color: #007880;
  46
  47     font-weight: 600;
  48     font-size: 21.5px;
  49     line-height: 140%;
  50     letter-spacing: -0.01em;
  51     color: #FFFFFF;
  52
  53     display: flex;
  54     flex-direction: column;
  55     justify-content: space-between;
  56
  57     .icon-link {
  58       margin-left: auto;
  59       margin-right: 0;
  60       &:hover {
  61         text-decoration: none;
  62       }
  63     }
  64
  65     a {
  66       &:hover {
  67         color: white;
  68       }
  69     }
  70   }
  71
  72   a {
  73     &:hover {
  74       text-decoration: underline;
  75     }
  76   }
  77
  78   h2 {
  79     font-weight: normal;
  80     font-size: 18px;
  81     line-height: 150%;
  82     color: #474747;
  83     margin: 0;
  84   }
  85   h3 {
  86     font-weight: normal;
  87     font-size: 15px;
  88     line-height: 160%;
  89     color: #808080;
  90     margin: 0;
  91   }
  92 }
  93
  94 .l-books__item__img {
  95   margin: 0;
  96   font-size: 0;
  97   margin-bottom: 11px;
  98
  99   a {}
 100   img {
 101     max-width: 170px;
 102   }
 103 }