_our-services.less 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. /* Our services */
  2. .our-services {
  3. margin-bottom: 150px;
  4. }
  5. .our-services__list {
  6. display: flex;
  7. flex-wrap: wrap;
  8. margin-right: -30px;
  9. margin-bottom: -50px;
  10. }
  11. .our-services__item {
  12. display: flex;
  13. flex-direction: column;
  14. align-items: flex-start;
  15. width: calc(25% - 30px);
  16. margin-right: 30px;
  17. margin-bottom: 50px;
  18. .general-more {
  19. margin-top: auto;
  20. }
  21. }
  22. .our-services__item__img {
  23. width: 100%;
  24. height: 120px;
  25. margin-bottom: 13px;
  26. img {
  27. width: 100%;
  28. height: 100%;
  29. object-fit: cover;
  30. }
  31. }
  32. .our-services__item__caption {
  33. font-family: "Cochin", serif;
  34. font-weight: 700;
  35. font-size: 20px;
  36. line-height: 120%;
  37. letter-spacing: 0.05em;
  38. text-transform: uppercase;
  39. margin-bottom: 10px;
  40. }
  41. .our-services__item__text {
  42. font-size: 14px;
  43. line-height: 150%;
  44. display: -webkit-box;
  45. -webkit-box-orient: vertical;
  46. -webkit-line-clamp: 2;
  47. overflow: hidden;
  48. text-overflow: ellipsis;
  49. max-height: 42px;
  50. margin-bottom: 14px;
  51. }
  52. @media screen and (max-width: 1210px) {
  53. .our-services {
  54. margin-bottom: 50px;
  55. }
  56. .our-services__list--main-page {
  57. .our-services__item {
  58. display: none;
  59. &:first-child {
  60. display: flex;
  61. }
  62. }
  63. }
  64. .our-services__list {
  65. margin-right: 0px;
  66. margin-bottom: -20px;
  67. }
  68. .our-services__item {
  69. width: 100%;
  70. margin-right: 0px;
  71. margin-bottom: 20px;
  72. }
  73. }
  74. /* //Our services */