@import url('../../commons/blocks/ew-parts-card/ew-parts-card.css');
.ew-parts-card {
  margin-top: 0;
  position: relative;
  .angled-top {
    display: none;
  }
  .ew-parts__container {
    position: relative;
    padding: 40px 0 40px 20px;
    background: var(--gradients-accent-section-bg-1);
    color: var(--secondary-black);
    @media (width >= 1024px) {
      padding: 56px 0 56px 56px;
    }
    .ew-parts__header {
      .ew-parts__title {
        width: auto;
        font-weight: var(--fw-700);
        font-size: var(--body-font-size-l);
        line-height: var(--heading-lh-19-mob-text-small);
        letter-spacing: normal;
        margin-bottom: 20px;
        @media (width >= 1024px) {
          font-size: var(--heading-font-1-des);
          line-height: var(--heading-lh-16-des-display);
          margin-bottom: 0;
        }
      }
      .ew-parts__desc {
        display: none;
      }
    }
    .ew-parts-slider {
      margin-top: 40px;
      @media (width>=1024px) {
        margin-bottom: 0px;
      }
      .ew-parts {
        margin: 0;
        display: flex;
        gap: 16px;
        @media (width >= 1024px) {
          gap: 24px;
        }
        .splide__slide {
          max-width: calc(75% - 20px);
          @media (width >= 768px) {
            max-width: calc((100% - 56px - 24px) / 2);
          }
          @media (width >= 1024px) {
            max-width: calc((100% - 56px - 2 * 24px) / 3);
          }
          .content {
            font-weight: var(--fw-500);
            line-height: var(--heading-lh-19-mob-display);
            font-size: var(--body-font-size-xs);
            letter-spacing: normal;
            @media (width >= 1024px) {
              line-height: var(--heading-lh-9-des-sub-heading);
              font-size: var(--body-font-size-l);
            }
          }
        }
      }
    }
    .controls-section {
      display: none;
      &.show-controls {
        display: block;
        position: absolute;
        padding-top: 0;
        top: 56px;
        right: 56px;
        @media (width >= 1024px) {
          transform: none;
          width: 100%;
        }
        .controls {
          display: none;

          @media (width >= 1024px) {
            display: block;
            display: flex;
            gap: 16px;
          }
          button {
            background-image: url(/icons/carousel-arrow-right-black.svg);
            &.prev-arrow {
              border: 1px solid var(--primary-blue-700);
            }
            &.next-arrow {
              border: 1px solid var(--primary-blue-700);
            }
          }
        }
        .pagination {
          display: none;
        }
      }
    }
  }
}