.voice .heading-component {
  @media (min-width: 769px) {
    padding-top: min(calc(100vw * (160 / 1280)), 160px);
  }
  .english {
    font-size: min(calc(100vw * (180 / 1280)), 180px);
    @media (max-width: 768px) {
      font-size: calc(100vw * (88 / 375));
      top: calc(100vw * (-25 / 375));
    }
  }
  .heading {
    color: #fff;
    &::after {
      background-color: #fff;
    }
  }
}

#voice {
  width: 100%;
  background:
    linear-gradient(90deg, rgba(131, 178, 255, 0) 12.64%, rgba(131, 178, 255, 0.32) 100%),
    linear-gradient(0deg, #20205d 0%, #20205d 100%),
    linear-gradient(90deg, rgba(131, 178, 255, 0) 12.64%, rgba(131, 178, 255, 0.32) 100%), #1a1f4a;
  background-blend-mode: screen, normal, screen, normal;
  padding-block: 50px 80px;

  @media (max-width: 768px) {
    padding: calc(100vw * (56 / 375)) 0;
  }

  .-wrapper {
    max-width: 1200px;
    margin-inline: auto;
  }
}

.splide.splide--voice {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: 0px;
  display: flex;
  flex-direction: column;
  @media (max-width: 768px) {
    margin-top: calc(100vw * (24 / 375));
  }

  .splide__track {
    position: relative;

    .splide__list {
      align-items: flex-end;

      .splide__slide {
        width: min(75%, 308px);
        overflow: hidden;
        transition: opacity 0.5s;
        opacity: 0.5;

        &.is-active,
        &.is-prev,
        &.is-next {
          width: min(85%, 342px);
          opacity: 1;
          @media (max-width: 768px) {
            width: calc(100vw * (342 / 375));
          }
          & img {
            border-radius: 20px;
            @media (max-width: 768px) {
              border-radius: 8px;
            }
          }
        }

        & img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 15px;
          transform-origin: center bottom;
          @media (max-width: 768px) {
            border-radius: 8px;
          }
        }
      }
    }

    .voice-custom-arrows {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      height: 64px;
      width: 95%;
      max-width: 1154px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      @media (max-width: 768px) {
        width: 98%;
        height: calc(100vw * (45 / 375));
      }

      .voice-custom-arrow {
        width: 64px;
        @media (max-width: 768px) {
          width: calc(100vw * (45 / 375));
        }
        svg {
          width: 100%;
        }
      }
    }
  }
  .splide__arrows {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    gap: 20px;
    order: 3;
    @media (max-width: 768px) {
      margin-top: calc(100vw * (20 / 375));
    }

    .splide__arrow {
      width: 12px;
      height: 12px;
      &.splide__arrow--prev {
        order: -1;
        transform: scaleX(-1);
      }
      & svg {
        width: 100%;
        height: 100%;
        object-fit: contain;
        path {
          fill: #fff;
        }
      }
    }

    .splide__pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      transform: translateY(-1px);
      & li {
      }
      & button {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: solid 1px #fff;
        cursor: pointer;

        &.is-active {
          background-color: #fff;
        }
      }
    }
  }
}

#voice .note-wrapper {
  color: #fff;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
}
@media (width < 1280px) {
  #voice .note-wrapper {
    padding-inline: 20px;
  }
}
@media (width < 769px) {
  #voice .note-wrapper {
    width: calc(100vw * (335 / 375));
  }
}
#voice .note-wrapper .note {
  text-align: left;
  font-size: 10px;
  margin-top: 20px;
  @media (width < 769px) {
    text-align: left;
    font-size: calc(100vw * (10 / 375));
  }
}