.tools-slider__container {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 100%;
  @media (min-width: 1280px) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tools-slider__swiper {
  position: relative;
  overflow: hidden;
}

.swiper-slide.tools-slide {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: auto;
  padding: 20px 20px 100px;
  border: 1px solid var(--color-border);
  border-top: none;
  color: var(--color-gray-3);
  background: white;
  @media (min-width: 768px) {
    border: 1px solid var(--color-border);
    border-left: none;
    padding: 30px 30px 120px;
  }
}

.tools-slider__picture {
  position: relative;
  z-index: 2;
  height: 294px;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  grid-column: 1 / -1;
  aspect-ratio: 16/9;
  background: linear-gradient(180deg, #f1f9f7 0%, #dde4ed 100%);
  @media (min-width: 768px) {
    min-height: 439px;
  }
  @media (min-width: 1280px) {
    height: 100%;
    grid-column: span 2;
  }
  @media (min-width: 1900px) {
    min-height: 549px;
  }
}

.tools-slider__bg {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  overflow: hidden;
  color: white;
  background: var(--color-primary);
  padding: 20px;
  @media (min-width: 1280px) {
    flex-direction: column;
    padding: 30px;
  }
}

.tools-slider__bg::before {
  content: "";
  position: absolute;
  width: 31.66vw;
  min-width: 400px;
  height: auto;
  aspect-ratio: 600.98 / 182.31;
  bottom: 8.33vw;
  background: radial-gradient(
    66.78% 226.51% at 54.2% 66.22%,
    #0781a3 0%,
    #0e1c2c 100%
  );
  filter: blur(89.75px);
  border-radius: 50%;
  transform: rotate(-30.13deg);
}

.tools-slider__bg::after {
  content: "";
  position: absolute;
  width: 23.177vw;
  min-width: 300px;
  height: auto;
  aspect-ratio: 445.05 / 278.35;
  bottom: 0;
  background: #31c4b4;
  filter: blur(66.6px);
  transform: rotate(-50.31deg);
  border-radius: 50%;
}

.tools-slider__content {
  padding: 120px var(--page-margin) 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 2;
  @media (min-width: 1280px) {
    padding: 180px 40px 40px;
    gap: 30px;
  }
  @media (min-width: 1900px) {
    padding: 250px 80px 80px 240px;
    gap: 40px;
  }
}

.tools-slider__title {
  position: relative;
  z-index: 2;
  max-width: 50%;
  @media (min-width: 1280px) {
    max-width: 100%;
  }
}

.tools-slider__fraction {
  position: relative;
  z-index: 2;
  color: white;
  font-family: "Audiowide", sans-serif;
  font-size: 24px;
  line-height: 1.33333;
  display: flex;
  align-items: center;
  gap: 9px;
  width: auto;
  @media (min-width: 1280px) {
    font-size: 32px;
    line-height: 1.25;
  }
}

.tools-slide__text {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.33333;
}

.tools-slider__controls {
  position: absolute;
  bottom: 40px;
  right: 20px;
  display: grid;
  grid-template-columns: 1fr;
  z-index: 2;
}

.tools-slider-footer.h1 {
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
  letter-spacing: -1.38px;
  @media (max-width: 1280px) {
    font-size: 24px;
    line-height: 1.08333;
    letter-spacing: -0.24px;
  }
}