.case-description {
  background: #001c36;

  &__content {
    display: flex;
    justify-content: space-between;
    padding: 48px 80px 64px 80px;
    gap: 32px;
  }

  &__right {
    max-width: 55%;
    font-family: Geist;
    font-weight: 300;
    font-size: 48px;
    line-height: 100%;
    letter-spacing: -2.8%;
    color: #f0f2f5;
    strong {
      font-weight: 300;
      color: #94a9b5;
    }
  }

  &__left {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    max-width: 337px;
    width: 100%;
  }

  &__info {
    display: flex;
    flex-flow: column;
    width: 100%;
  }

  &__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #ffffff1f;
    padding: 8px 0;
  }

  &__item-label {
    font-family: Geist Mono;
    font-weight: 500;
    font-size: 12px;
    line-height: 130%;
    letter-spacing: -1%;
    vertical-align: middle;
    color: #94a9b5;
  }

  &__item-value {
    font-family: Geist;
    font-weight: 400;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #f0f2f5;
  }
}

.technologies {
  background: #f0f2f5;

  &__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__mini-title {
    max-width: 337px;
    width: 100%;
  }

  &__title {
    max-width: 55%;
    width: 100%;
    font-family: Geist;
    font-weight: 400;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: -2.8%;
    color: #001c36;
    strong {
      font-weight: 400;
      color: #94a9b5;
    }
  }

  &__content {
    display: flex;
    flex-flow: column;
    gap: 64px;
    padding: 48px 80px 148px 80px;
  }

  &__body {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: 98px;

    img {
      max-width: 460px;
      width: 100%;
      height: 520px;
    }
  }

  &__body-accordion-item-top {
    display: flex;
    flex-flow: row;
    gap: 32px;
    width: 100%;
  }

  &__body-accordion-label-button {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    width: 100%;
    padding: 24px 0;
  }

  &__body-accordion-counter {
    display: flex;
    align-items: center;
    font-family: Geist Mono;
    font-weight: 500;
    font-size: 12px;
    line-height: 130%;
    letter-spacing: -1%;
    color: #607d8b;
  }

  &__body-accordion-label {
    font-family: Geist;
    font-weight: 500;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.4%;
    vertical-align: middle;
    color: #001c36;
  }

  &__body-accordion-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px 18px;
    border-radius: 30px;
    border: 1px solid #94a9b5;
  }

  &__body-accordion {
    display: flex;
    flex-flow: column;
    width: 100%;
    &:last-child {
      border-bottom: 1px dashed #546e7a3d;
    }
  }

  &__body-accordion-item {
    display: flex;
    flex-flow: column;
    border-top: 1px dashed #546e7a3d;
  }

  &__body-accordion-item-panel {
    max-height: 0px;
    overflow: hidden;
    transition: 0.3s ease;
  }

  &__body-accordion-item-panel-text {
    font-family: Geist;
    font-weight: 400;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #607d8b;
  }
}

.project-gallery {
  background: #001c36;

  &__content {
    padding: 48px 80px 148px 80px;
    display: flex;
    flex-flow: column;
    gap: 64px;
  }

  &__head {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
  }

  &__mini-title {
    max-width: 337px;
    width: 100%;
  }

  &__body {
    img {
      height: 306px;

      &.high-image {
        height: 520px;
      }
    }
  }

  &__title {
    max-width: 55%;
    width: 100%;
    font-family: Geist;
    font-weight: 300;
    font-size: 48px;
    line-height: 100%;
    letter-spacing: -2.8%;
    color: #f0f2f5;
    strong {
      color: #94a9b5;
      font-weight: 300;
    }
  }

  &__pagination-container {
    display: flex;
    flex-flow: column;
    gap: 38px;
    margin-top: 96px;
  }

  &__arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px 18px;
    border-radius: 30px;
    border: 1px solid #90a4aea6;
    width: fit-content;
  }

  &__arrows {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
  }

  &__pagination {
    display: flex;
    position: relative;
    width: 100%;
    gap: 4px;
    width: 100%;

    &.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
    .swiper-pagination-horizontal.swiper-pagination-bullets
      .swiper-pagination-bullet {
      margin: 0;
      width: 100%;
      border-radius: 0;
    }

    .swiper-pagination-bullet {
      width: 100%;
      border-radius: 0;
      height: 3px;
      background: #ffffff1f;
      transition: 0.3s ease;
    }

    .swiper-pagination-bullet-active {
      background: #94a9b5;
    }
  }

  &__footer {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
  }

  &__prev-proj {
    display: flex;
    gap: 16px;
    align-items: center;
    text-decoration: none;
    img {
      border-radius: 100px;
      width: 64px;
      height: 64px;
      aspect-ratio: 1;
    }
  }

  &__prev-proj-container {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Geist;
    font-weight: 400;
    font-size: 28px;
    line-height: 110.00000000000001%;
    letter-spacing: 0px;
    text-align: center;
    color: #fff;
  }

  &__next-proj {
    display: flex;
    align-items: center;
    gap: 36px;
    text-decoration: none;
    img {
      border-radius: 100px;
      width: 150px;
      height: 150px;
      aspect-ratio: 1;
    }
  }

  &__next-proj-container {
    display: flex;
    flex-flow: column;
    justify-content: center;
    gap: 12px;
  }

  &__next-proj-top {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Geist;
    font-weight: 400;
    font-size: 28px;
    line-height: 110.00000000000001%;
    letter-spacing: -0.8%;
    text-align: center;
    color: #fff;
  }

  &__next-proj-bot {
    font-family: Geist;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0%;
    color: #94a9b5;
  }
}

@media (max-width: 1024px) {
  .case-description {
    &__content {
      flex-flow: column;
      align-items: center;
      padding: 16px 0 48px 0;
    }

    &__right {
      max-width: 100%;
      text-align: center;
      font-family: Geist;
      font-weight: 300;
      font-size: 32px;
      line-height: 100%;
      letter-spacing: -2.8%;
      text-align: left;
    }

    &__left {
      max-width: 100%;
      width: 100%;
      gap: 24px;
    }
  }

  .technologies {
    &__content {
      padding: 16px 0 48px 0;
      gap: 32px;
    }

    &__body img {
      max-width: 100%;
      height: auto;
    }

    &__title {
      max-width: 100%;
      width: 100%;
    }

    &__body {
      flex-flow: column;
      gap: 32px;
    }

    &__body-accordion-item-panel-text {
      font-size: 14px;
    }
  }

  .project-gallery {
    &__content {
      padding: 16px 0 48px 0;
      gap: 32px;
    }

    &__head {
      flex-flow: column;
    }

    &__body img {
      max-width: 100%;
      height: auto;
    }

    &__title {
      max-width: 100%;
      width: 100%;
    }

    &__footer {
      flex-flow: column-reverse;
      align-items: center;
      gap: 32px;
    }

    &__prev-proj,
    &__next-proj {
      gap: 16px;
    }

    &__next-proj {
      img {
        width: 77px;
        height: 77px;
      }
    }
  }
}