.cases-sample {
  overflow: hidden;
}

.cases-sample__head {
  margin: 0;
  font-size: 35px;
  font-style: normal;
  font-weight: 700;
  line-height: 45px;
}

@media screen and (max-width: 1920px) {
  .cases-sample__head {
    font-size: calc(30px + (35 - 30) * ((100vw - 1536px) / (1920 - 1536)));
    line-height: calc(40px + (45 - 40) * ((100vw - 1536px) / (1920 - 1536)));
  }
}

@media screen and (max-width: 1536px) {
  .cases-sample__head {
    font-size: calc(24px + (30 - 24) * ((100vw - 1280px) / (1536 - 1280)));
    line-height: calc(36px + (40 - 36) * ((100vw - 1280px) / (1536 - 1280)));
  }
}

@media screen and (max-width: 1280px) {
  .cases-sample__head {
    font-size: 24px;
    line-height: 36px;
  }
}

.cases-sample .swiper {
  overflow: initial;
}

.cases-sample__grid {
  margin-bottom: 70px;
}

@media screen and (max-width: 1920px) {
  .cases-sample__grid {
    margin-bottom: calc(60px + (70 - 60) * ((100vw - 1536px) / (1920 - 1536)));
  }
}

@media screen and (max-width: 1536px) {
  .cases-sample__grid {
    margin-bottom: calc(50px + (60 - 50) * ((100vw - 1280px) / (1536 - 1280)));
  }
}

@media screen and (max-width: 1280px) {
  .cases-sample__grid {
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 922px) {
  .cases-sample__grid {
    margin-bottom: calc(30px + (50 - 30) * ((100vw - 414px) / (922 - 414)));
  }
}

@media screen and (max-width: 768px) {
  .cases-sample__grid {
    margin-bottom: 30px;
  }
}

.cases-sample-item {
  position: relative;
}

.cases-sample__link {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

@media screen and (max-width: 1920px) {
  .cases-sample__link {
    gap: calc(21px + (30 - 21) * ((100vw - 1536px) / (1920 - 1536)));
  }
}

@media screen and (max-width: 1536px) {
  .cases-sample__link {
    gap: calc(14px + (21 - 14) * ((100vw - 1280px) / (1536 - 1280)));
  }
}

@media screen and (max-width: 1280px) {
  .cases-sample__link {
    gap: 14px;
  }
}

@media screen and (max-width: 922px) {
  .cases-sample__link {
    gap: calc(8px + (14 - 8) * ((100vw - 414px) / (922 - 414)));
  }
}

@media screen and (max-width: 414px) {
  .cases-sample__link {
    gap: 8px;
  }
}

.cases-sample__imgs {
  position: relative;
  margin-bottom: 10px;
  aspect-ratio: 587 / 555;
  overflow: hidden;
  border-radius: 20px;
}

.cases-sample__img {
  object-fit: contain;
  position: relative;
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: 100%;
}

.cases-sample__img-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: .3s linear;
  z-index: 2;
}

.cases-sample__item--taskee:hover .cases-sample__img-hover {
  opacity: 1;
  pointer-events: all;
}

.cases-sample__item--oil .cases-sample__imgs {
  background-color: #262626;
  border-radius: 20px;
}

.cases-sample__item--oil .cases-sample__img--first {
  position: absolute;
  bottom: 0;
  z-index: 2;
  transform: scale(.8);
  transform-origin: bottom;
  transition: .3s linear;
  object-fit: cover;
}

.cases-sample__item--oil:hover .cases-sample__img--first {
  transform: scale(1);
}

.cases-sample__item--oil .cases-sample__img--second {
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  transform-origin: center;
  transition: .3s linear;
  border-radius: 20px;
}

.cases-sample__item--oil:hover .cases-sample__img--second {
  transform: translateX(-50%) scale(.7);
}

.cases-sample__item--kiriliza .cases-sample__imgs {
  padding: 35px;
  background-color: rgba(245, 245, 245, 1);
  transition: .4s ease;
}

.cases-sample__item--kiriliza .cases-sample__img-hover {
  padding: 35px;
}

.cases-sample__item--kiriliza .cases-sample__img {
  transition: .4s ease;
}

.cases-sample__item--kiriliza:hover .cases-sample__imgs {
  background-color: rgba(32, 32, 32, 1);
}

.cases-sample__item--kiriliza:hover .cases-sample__img--kiriliza {
  opacity: 0;
  pointer-events: none;
}

.cases-sample__item--kiriliza:hover .cases-sample__img-hover {
  opacity: 1;
  pointer-events: all;
}

.cases-sample__item--braer:hover .cases-sample__img-hover {
  opacity: 1;
  pointer-events: all;
}

.cases-sample__item--bizon .cases-sample__imgs {
  background: #E3E3E3;
}

.cases-sample__item--bizon .cases-sample__img--first {
  bottom: 0;
  transition: .3s linear;
  transform: translate(11%, -11%) rotate(0);
}

.cases-sample__item--bizon .cases-sample__img--second {
  bottom: 0;
  z-index: 2;
  transition: .3s linear;
  transform: translate(7%, 10%) rotate(0);
}

.cases-sample__item--bizon .cases-sample__img {
  position: absolute;
  height: auto;
  bottom: 0;
}

.cases-sample__item--bizon:hover .cases-sample__img--first {
  transform: translate(11%, -11%) rotate(6deg);
}

.cases-sample__item--bizon:hover .cases-sample__img--second {
  transform: translate(7%, 10%) rotate(6deg);
}

.cases-sample__item--kenika .cases-sample__imgs {
  padding: 0 0 0 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .3s ease;
  background-color: #F0F2FA;
}

.cases-sample__item--kenika .cases-sample__img {
  display: block;
  height: initial;
  transition: all .3s ease;
  transform-origin: left center;
  transform: scale(1.4);
  aspect-ratio: 752 / 463;
}

.cases-sample__item--kenika:hover .cases-sample__imgs {
  padding: 0 31px 0 31px;
}

.cases-sample__item--kenika:hover .cases-sample__img--kenika {
  transform: scale(1);
}

.cases-sample__item--pikabu .cases-sample__imgs {
  padding: 0 0 0 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FAE0EC;
}

.cases-sample__item--pikabu .preview-cases__img {
  height: auto;
  transform: scale(1.3);
  transform-origin: left center;
  aspect-ratio: 688 / 374;
}

.cases-sample__item--pikabu .preview-cases__imgs {
  padding: 0 0 0 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FAE0EC;
}

.cases-sample__item--pikabu .cases-sample__img {
  height: auto;
  transform: scale(1.3);
  transform-origin: left center;
  aspect-ratio: 688 / 374;
}

.cases-sample__item--bizi .cases-sample__imgs {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #BDBDEA;
}

.cases-sample__item--bizi .cases-sample__img--first {
  z-index: 2;
}

.cases-sample__item--bizi .cases-sample__img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 74px);
  height: auto;
  aspect-ratio: 516 / 287;
  transform: translate(-50%, -50%);
  transition: .3s linear;
}

.cases-sample__item--bizi:hover .cases-sample__img--first {
  transform: translate(-55%, -30%);
}

.cases-sample__item--bizi:hover .cases-sample__img--second {
  transform: translate(-45%, -70%);
}

.cases-sample__item--levitek .cases-sample__imgs {
  padding: 0 0 0 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F0F2FA;
}

.cases-sample__item--levitek .cases-sample__img--first {
  height: auto;
  transform: scale(1.3);
  transform-origin: left center;
  aspect-ratio: 677 / 383;
}

.cases-sample__item--levitek .cases-sample__img--second {
  position: absolute;
  bottom: -30px;
  right: -23px;
  aspect-ratio: 200 / 332;
  transform: scale(.7);
  transform-origin: center bottom;
}

.cases-sample__title {
  margin: 0;
  font-weight: 600;
  font-size: 30px;
  line-height: 40px;
  color: var(--basic-black);
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (max-width: 1920px) {
  .cases-sample__title {
    font-size: calc(28px + (30 - 28) * ((100vw - 1536px) / (1920 - 1536)));
  }
}

@media screen and (max-width: 1536px) {
  .cases-sample__title {
    font-size: calc(24px + (28 - 24) * ((100vw - 1280px) / (1536 - 1280)));
    line-height: calc(36px + (40 - 36) * ((100vw - 1280px) / (1536 - 1280)));
  }
}

@media screen and (max-width: 1280px) {
  .cases-sample__title {
    font-size: 24px;
    line-height: 36px;
  }
}

@media screen and (max-width: 922px) {
  .cases-sample__title {
    font-size: calc(20px + (24 - 20) * ((100vw - 414px) / (922 - 414)));
    line-height: calc(30px + (36 - 30) * ((100vw - 414px) / (922 - 414)));
  }
}

@media screen and (max-width: 414px) {
  .cases-sample__title {
    font-size: 20px;
    line-height: 30px;
  }
}

.cases-sample__tags {
  display: flex;
  gap: 10px;
  align-items: center;
}

.cases-sample__tag {
  padding: 10px 25px;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  color: var(--basic-black);
  border-radius: 77px;
  background-color: #F7F8FC;
}

@media screen and (max-width: 1920px) {
  .cases-sample__tag {
    padding: 10px calc(20px + (25 - 20) * ((100vw - 1536px) / (1920 - 1536)));
    font-size: calc(16px + (18 - 16) * ((100vw - 1536px) / (1920 - 1536)));
    line-height: calc(24px + (28 - 24) * ((100vw - 1536px) / (1920 - 1536)));
  }

}

@media screen and (max-width: 1536px) {
  .cases-sample__tag {
    padding: 10px 20px;
    font-size: calc(14px + (16 - 14) * ((100vw - 1280px) / (1536 - 1280)));
    line-height: calc(22px + (24 - 22) * ((100vw - 1280px) / (1536 - 1280)));
  }
}

@media screen and (max-width: 1280px) {
  .cases-sample__tag {
    font-size: 14px;
    line-height: 22px;
  }
}

#circle-hover {
  position: fixed;
  top: 0;
  left: 0;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: background-color .25s ease, opacity .25s ease;
  z-index: 3;
}

.cases-sample__inner {
  margin-bottom: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

@media screen and (max-width: 1920px) {
  .cases-sample__inner {
    margin-bottom: calc(35px + (45 - 35) * ((100vw - 1536px) / (1920 - 1536)));
  }
}

@media screen and (max-width: 1536px) {
  .cases-sample__inner {
    margin-bottom: calc(30px + (35 - 30) * ((100vw - 1280px) / (1536 - 1280)));
  }
}

@media screen and (max-width: 1280px) {
  .cases-sample__inner {
    margin-bottom: 30px;
  }
}

.cases-sample__item {
  width: 587px;
}

@media screen and (max-width: 1920px) {
  .cases-sample__item {
    width: calc(553px + (587 - 553) * ((100vw - 1536px) / (1920 - 1536)));
  }
}

@media screen and (max-width: 1536px) {
  .cases-sample__item {
    width: calc(472px + (553 - 472) * ((100vw - 1280px) / (1536 - 1280)));
  }
}

@media screen and (max-width: 1280px) {
  .cases-sample__item {
    width: calc(411px + (472 - 411) * ((100vw - 922px) / (1280 - 922)));
  }
}

@media screen and (max-width: 922px) {
  .cases-sample__item {
    width: auto;
  }
}