.car-detail-interior-video {
  .animation-info--text {
    color: var(--tertiary-white);
    font-family: var(--font-primary-nexa);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2rem; /* 165% */
    margin-block: 43px 24px;
  }
  .cta-btn {
    gap: 8px;
    display: inline-flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    color: var(--tertiary-white);
    text-align: center;
    /* Mobile/Buttons/Mobile- button */
    font-family: var(--font-primary-nexa);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem; /* 142.857% */
    position: relative;
    .north-east_arrow {
      width: 16px;
      height: 16px;
      background-size: contain;
      background-repeat: no-repeat;
      background-image: url('/icons/north_east-white-20x20.svg');
    }
  }
  .video {
    position: relative;
    &:after {
      content: '';
      width: 100vw;
      height: 360px;
      display: block;
      background: linear-gradient(0deg, #171a1c 0%, rgba(23, 26, 28, 0) 81.87%);
      position: absolute;
      bottom: 0;
    }
  }
  .vjs-v8 {
    width: auto;
    height: auto;
    .vjs-loading-spinner {
      display: none;
    }
  }
  .car-interior-video {
    overflow: hidden;
    background-color: #4a4a52;
    clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%, 0 16px, 20% 16px);
    .video-container {
      overflow: hidden;
      position: relative;
      video {
        width: 100%;
        display: block;
        min-height: 540px;
      }
    }
    .scroll-in-out-fade-animation {
      height: 666px;
      overflow: hidden;
      position: relative;
      background: #171a1c;
      .subject-container {
        padding: 0 20px;
      }
      .animation-info {
        top: 0;
        position: absolute;
        transition: transform 1s linear;
      }
    }
  }
}

@media (width >= 768px) {
  .car-detail-interior-video {
    .car-interior-video {
      clip-path: polygon(17% 0, 100% 0, 100% 100%, 0 100%, 0 16px, 15% 16px);  
      .video-container {
        video {
          object-fit: cover;
          max-height: 776px;
        }
      }
    }
  }
}

@media (width >= 1024px) {
  .car-detail-interior-video {
    .car-interior-video {
      padding-top: 0;
      clip-path: none;
      background-color: transparent;
      .scroll-in-out-fade-animation {
        height: 868px;
        .cta-btn {
          margin-left: 84px;
          line-height: 24px;
          padding: 14px 28px;
          font-size: 1.125rem;
          .north-east_arrow {
            width: 20px;
            height: 20px;
          }
        }
      }
      .video-container {
        video {
          max-height: 576px;
        }
      }
    }
    .animation-info--text {
      padding-left: 84px;
      font-size: 2rem;
      line-height: 44px;
      margin-top: 96px;
    }
  }
}

@media (width >= 1366px) {
  .car-detail-interior-video {
    .car-interior-video {
      .video-container {
        video {
          object-fit: cover;
          max-height: 768px;
        }
      }
    }
    .animation-info--text {
      margin-top: 12px;
    }
  }
}

@media (width >= 1920px) {
  .car-detail-interior-video {
    .car-interior-video {
      .video-container {
        video {
          object-fit: cover;
          max-height: 1080px;
        }
      }
    }
  }
}

.car-detail-interior-video {
  .animation-info--text {
    margin: 0;
    line-height: normal;
    margin-bottom: 24px;
    font-family: var(--body-font-family);
    @media (width >= 1024px) {
      font-size: 2rem;
      font-weight: var(--fw-500);
      line-height: 2.5rem;
      padding-left: 0;
    }
  }
  .cta-btn {
    line-height: 18px;
    margin-bottom: 40px;
    background: transparent;
    font-family: var(--body-font-arena);
    border: 1px solid var(--tertiary-white);
    &:hover {
      background-color: var(--primary-blue-900);
      color: var(--secondary-white);
      border: 1px solid var(--primary-blue-900);
    }
    .north-east_arrow {
      display: none;
    }
    @media (width >= 1024px) {
      padding: 11px 24px;
      margin-bottom: 63px;
      line-height: 16px;
    }

    @media (width >= 1366px) {
      margin-bottom: 64px;
    }
  }
  .content-info {
    top: 0;
    left: 0;
    width: 232px;
    height: 100%;
    overflow: hidden;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    z-index: 1;

    @media (width >= 768px) {
      width: 100%;
    }
  }
  .car-interior-video {
    clip-path: none;
    background-color: transparent;
    .video-container {
      &::after {
        content: '';
        width: 100%;
        height: 100%;
        flex-shrink: 0;
        background: linear-gradient(40deg, #171a1c 0%, rgba(23, 26, 28, 0) 81.87%);
        display: block;
        position: absolute;
        bottom: 0px;
      }
      .video {
        background: black;
        @media (width <1024px) {
          height: 765px;
        }
      }
    }
  }
}