@media screen and (min-width: 768px) {
  .sites-animations {
    height: 580px;
  }
  .sites-animations .ai-sphere {
    width: 160px;
    height: 160px;
    padding: 35px;
  }
  .sites-animations .ai-sphere img {
    width: 90px !important;
    height: 90px !important;
  }
  .sites-animations .sites-animations__images {
    gap: 16px;
  }
  .sites-animations .sites-animations__images .show_case_inner {
    gap: 16px;
  }
  .sites-animations .sites-animations__images .show_case_inner:first-child .show_case_items {
    width: 3504px;
  }
  .sites-animations .sites-animations__images .show_case_inner:nth-child(2) .show_case_items {
    width: 3344px;
  }
  .sites-animations .sites-animations__images .item {
    border-radius: 12px;
    height: 280px;
  }
  .sites-animations .sites-animations__images .item img {
    border-radius: 12px;
    height: 280px;
  }
  .sites-animations .sites-animations__images .with-change-image {
    width: 420px;
  }
  .sites-animations .sites-animations__images .with-change-image img {
    width: 420px;
  }
  .sites-animations .sites-animations__images .service-medium {
    width: 280px;
  }
  .sites-animations .sites-animations__images .service-medium img {
    width: 280px;
  }
  .sites-animations .sites-animations__images .service-small {
    width: 136px;
  }
  .sites-animations .sites-animations__images .service-small img {
    width: 136px;
  }
  .sites-animations .sites-animations__images .show_case_items .items {
    grid-column-gap: 16px;
  }
  .sites-animations .sites-animations__images .service-small {
    width: 136px;
    height: 280px;
  }
  .sites-animations .sites-animations__images .images-group img {
    width: 136px;
    height: 136px;
  }
}
@media screen and (max-width: 1260px) and (min-width: 768px) {
  .sites-animations {
    height: 480px;
    overflow: hidden;
    align-items: flex-start;
  }
  .sites-animations:before, .sites-animations:after {
    width: 160px;
  }
  .sites-animations:before {
    left: 0;
    background: linear-gradient(90deg, #000 25.5%, rgba(0, 0, 0, 0) 100%);
  }
  .sites-animations:after {
    right: 0;
    background: linear-gradient(270deg, #000 25.5%, rgba(0, 0, 0, 0) 100%);
  }
}
@media screen and (min-width: 1260px) {
  .sites-animations:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 100%);
  }
  .sites-animations:after {
    content: "";
    position: absolute;
    bottom: -44px;
    top: auto;
    left: 0;
    width: 100%;
    height: 320px;
    background: linear-gradient(0deg, #000 25.5%, rgba(0, 0, 0, 0) 100%);
  }
  .sites-animations__images {
    position: absolute;
    top: 0;
  }
}