.s-section--case {text-align: center;}
.s-section--case h1 {color: var(--font-color); font-size: 22px; line-height: 100%; padding-bottom: 12px;}
.t-section--case {padding-top: 16px;}
.cases-tabs {display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px;}
.cases-tabs__item {font-size: 14px; line-height: 100%; border-bottom: solid 2px transparent; color: var(--font-color);}
.cases-tabs__item.active {color: var(--accent-color); border-color: var(--accent-color);}
.cases-list {display: grid;}
.cases-list--seo {display: flex; flex-direction: column;}
.cases-list {grid-template-columns: repeat(1, 1fr); gap: 16px;}
.cases-list__item {display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; box-shadow: 0px 8px 16px 0px #7E87A026;}
.cases-list__item-image {display: block; height: 272px; width: 100%;}
.cases-list__item-image img {width: 100%!important; height: 100%!important; object-fit: cover;}
.cases-list__item-body {display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 117px; padding: 16px; gap: 4px; background: #fff;}
.cases-list__item-title {font-size: 18px; line-height: 100%; font-weight: 600; color: var(--font-color);}
.cases-list__item-desc {font-size: 14px; line-height: 100%; color: var(--font-color);}
.cases-bottom {display: flex; justify-content: center; padding-top: 32px;}
.button-cases {padding: 19.5px 75.5px; color: #fff;}

@media (min-width: 320px) {
  .s-section--case h1 {font-size: 32px; padding-bottom: 16px;}
  .t-section--case {padding-top: 32px;}
  .cases-tabs {gap: 12px 16px;}
  .cases-tabs__item {font-size: 16px; line-height: 22px;}
  .cases-list {grid-template-columns: repeat(2, 1fr); gap: 20px;}
  .button-cases {padding: 18.5px 44.5px; color: #fff;}
}
@media (min-width: 768px) {
  .s-section--case h1 {font-size: 36px;}
  .cases-list {grid-template-columns: repeat(3, 1fr);}
  .cases-list__item-image {height: 342px;}
  .cases-list__item-body {min-height: 165px; padding: 24px; gap: 8px;}
  .cases-list__item-title {font-size: 22px;}
  .cases-list__item-desc {font-size: 16px; line-height: 22px;}
}
@media (min-width: 1280px) {
  .cases-list__item-image {height: 400px;}
  .cases-list__item-body {min-height: 159px; padding: 24px; gap: 16px;}
  .cases-list__item-title {font-size: 24px;}
}
@media (min-width: 1920px) {
  .cases-list__item-body {min-height: 182px; padding: 32px;}
}
