_our-staf.less 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. /* Our staff */
  2. .our-staff {
  3. margin-bottom: 150px;
  4. &.active {
  5. .main-button {
  6. &::before {
  7. content: "Скрыть";
  8. }
  9. }
  10. .our-staff__item {
  11. &:nth-child(n + 9) {
  12. display: flex;
  13. animation: opacity-staff .4s;
  14. }
  15. }
  16. }
  17. .main-button {
  18. display: none;
  19. margin: 40px auto 0px;
  20. &.show {
  21. display: flex;
  22. }
  23. &::before {
  24. content: "показать всех";
  25. }
  26. }
  27. }
  28. @keyframes opacity-staff {
  29. 0% {
  30. opacity: 0;
  31. }
  32. 100% {
  33. opacity: 1;
  34. }
  35. }
  36. .our-staff__info {
  37. font-size: 16px;
  38. line-height: 150%;
  39. margin-bottom: 80px;
  40. p {
  41. margin-bottom: 20px;
  42. &:last-child {
  43. margin-bottom: 0px;
  44. }
  45. }
  46. }
  47. .our-staff__list {
  48. display: flex;
  49. flex-wrap: wrap;
  50. margin-right: -30px;
  51. margin-bottom: -80px;
  52. }
  53. .our-staff__item {
  54. display: flex;
  55. flex-direction: column;
  56. align-items: center;
  57. width: calc(25% - 30px);
  58. margin-right: 30px;
  59. text-align: center;
  60. margin-bottom: 80px;
  61. &:nth-child(n + 9) {
  62. display: none;
  63. }
  64. }
  65. .our-staff__item__img {
  66. max-width: 206px;
  67. width: 100%;
  68. height: 228px;
  69. margin-bottom: 30px;
  70. }
  71. .our-staff__item__name {
  72. font-family: "Cochin", serif;
  73. font-weight: 700;
  74. font-size: 16px;
  75. line-height: 19px;
  76. letter-spacing: 0.05em;
  77. text-transform: uppercase;
  78. margin-bottom: 10px;
  79. }
  80. .our-staff__item__sub {
  81. font-weight: 700;
  82. font-size: 12px;
  83. line-height: 15px;
  84. text-transform: uppercase;
  85. color: #828282;
  86. margin-top: auto;
  87. }