.container {
  .feedbacks-section {
    padding: 72px 20px 62px;
    background-color: var(--primary-color-700);
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 56px;

    .feedbacks-title {
      color: var(--text-color-50);
      font-weight: var(--thin-weight);
      font-size: var(--xl-font-size);
      line-height: var(--xl-line-height);
      text-align: center;
    }

    .swiper {
      width: 100%;
      max-width: var(--xl-breakpoint);
      height: fit-content;
      padding: 0 1px;
      padding-bottom: 76px;
      position: relative;
      user-select: none;

      .swiper-wrapper {
        height: 100%;
        display: flex;
        align-items: stretch;

        .swiper-slide {
          padding: 32px;
          border: solid 1px var(--text-color-50);
          border-radius: 10px;
          display: flex;
          flex-direction: column;
          gap: 16px;
          height: auto;
          user-select: none;
          cursor: grab;

          .feedback-header {
            display: flex;
            align-items: center;
            gap: 20px;

            .avatar {
              height: 50px;
              width: auto;
            }

            .author-info {
              .feedback-author {
                color: var(--text-color-50);
                margin-bottom: 6px;
                font-weight: var(--bold-weight);
                font-size: var(--sm-font-size);
              }

              .author-position {
                color: var(--text-color-50);
                font-size: var(--tiny-font-size);
                font-weight: var(--thin-weight);
              }
            }
          }

          .feedback-text {
            color: var(--text-color-50);
            font-size: var(--xs-font-size);
            font-weight: var(--thin-weight);
            margin-bottom: 4px;
            line-height: var(--tiny-line-height);

            .highlight {
              color: var(--secondary-color-600);
            }
          }

          .linkedin {
            color: var(--text-color-50);
            display: flex;
            align-items: end;
            gap: 10px;
            font-size: var(--xs-font-size);
            font-weight: var(--thin-weight);

            .linkedin-icon {
              height: 20px;
              width: auto;
            }
          }
        }

        .swiper-slide.opacity {
          opacity: 0.3;
        }
      }

      .swiper-pagination {
        bottom: 10px;
        display: flex;
        gap: 16px;
        justify-content: center;

        .swiper-pagination-bullet {
          padding: 0;
          margin: 0;
          height: 10px;
          width: 10px;
          background: var(--text-color-50);
          opacity: 1;
          transition-duration: 0.3s;
        }

        .swiper-pagination-bullet-active {
          background: var(--text-primary-color-800);
          box-shadow: 0 0 5px var(--text-color-50);
        }
      }
    }

    .swiper::after,
    .swiper::before {
      content: "";
      width: 25%;
      position: absolute;
      height: calc(100% - 76px);
      z-index: 2;
      opacity: 0.7;
      top: 0;
    }

    .swiper::after {
      right: 0;
      background: linear-gradient(
        to left,
        var(--primary-color-700) 70%,
        transparent
      );
    }

    .swiper::before {
      background: linear-gradient(
        to right,
        var(--primary-color-700) 70%,
        transparent
      );
      left: 0;
    }
  }
}