post.css 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. .post{
  2. max-width: 570px;
  3. display: flex;
  4. justify-content: space-between;
  5. flex-grow: 1;
  6. }
  7. .posts-wrapper{
  8. display: flex;
  9. flex-wrap: wrap;
  10. justify-content: space-between;
  11. row-gap: 40px;
  12. margin-bottom: 75px;
  13. }
  14. .post__content{
  15. max-width: 370px;
  16. display: flex;
  17. flex-direction: column;
  18. justify-content: center;
  19. }
  20. .post__title{
  21. margin: 0;
  22. margin-bottom: 10px;
  23. font-family: 'Playfair Display', serif;
  24. font-style: normal;
  25. font-weight: normal;
  26. font-size: 20px;
  27. color: #000000;
  28. row-gap: 40px;}
  29. .post__text{
  30. margin: 0;
  31. margin-bottom: 10px;
  32. font-style: normal;
  33. font-weight: normal;
  34. font-size: 14px;
  35. line-height: 1.3;
  36. color: #777777;
  37. }
  38. .post__reade-more{
  39. font-family: 'Playfair Display', serif;
  40. font-style: normal;
  41. font-weight: normal;
  42. font-size: 16px;
  43. color: #000000;
  44. text-decoration: none;
  45. }
  46. .post__reade-more::after{
  47. content: '';
  48. display: inline-block;
  49. width: 24px;
  50. height: 24px;
  51. background-image: url('./../../img/arrow.svg');
  52. background-position: center;
  53. background-size: auto;
  54. background-repeat: no-repeat;
  55. vertical-align: middle;
  56. transition: margin 0.2s ease-in;
  57. }
  58. .post__reade-more:hover{
  59. text-decoration: underline;
  60. }
  61. .post__reade-more:hover::after{
  62. margin-left: 10px;
  63. }