.news { padding: 50px 0; overflow: hidden; @media (min-width: $desktop) { padding: 100px 0; padding-bottom: 0; } &__toper { display: flex; justify-content: space-between; align-items: center; .title { @media (min-width: $desktop) { width: calc(100% - 160px); } } .navs { display: none; @media (min-width: $desktop) { display: flex; } } } .swiper { margin-top: 20px; @media (min-width: $tablet) { overflow: visible; } @media (min-width: $laptop) { margin-top: 40px; } } &__item { display: flex; flex-direction: column; line-height: 1.4; &-pic { width: 100%; aspect-ratio: 3/2; border-radius: 12px; border: 1px solid #e6e7e7; object-fit: cover; min-height: 200px; @media (min-width: $desktop) { aspect-ratio: 4/2; } } &-body { display: flex; flex-direction: column; padding-top: 15px; @media (min-width: $tablet) { padding: 20px; padding-top: 30px; margin-top: -15px; border-radius: 0 0 12px 12px; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15); } } &-date { font-size: 14px; font-weight: 700; color: $green; } &-title { font-size: 20px; font-weight: 700; line-height: 1.2; margin-top: 5px; } &-text { color: #6b6c6d; font-size: 13px; margin-top: 10px; @media (min-width: $desktop) { font-size: 16px; } } &-more { height: 42px; margin-top: 20px; @media (min-width: $desktop) { height: 44px; max-width: 190px; } } } &__all { height: 42px; margin: 0 auto; margin-top: 20px; padding: 0; display: none; @media (min-width: $tablet) { max-width: 170px; margin-top: 30px; display: flex; } @media (min-width: $desktop) { height: 44px; } } }