html[data-scroll-comp="variant-listing"] {
  scroll-padding-top: 60px;
  @media (width >= 1024px){
    scroll-padding-top: 120px;
  }
}

.section.variant-listing-container {
    position: relative;
    .variant-listing-wrapper {
        height: 100%;
        overflow: hidden;
        .variant-listing.block {
            height: 100%;
            .variant_list {
                height: 100%;
                position: relative;
                picture{
                  width: 100%;
                  min-height: 400px;
                  display: block;
                }
                img {
                    display: block;
                    width: 100vw;
                }
                .variant-overlay-wrapper {
                    inset: 0;
                    .variant-details-wrapper {
                      z-index: 1;
                      position: absolute;
                      top: 0;

                        .variant-details-inner {
                            color: var(--tertiary-white);
                            padding-top: 46px;

                            @media(width >=1024px) {
                              padding-top: 84px;
                              color: var(--tertiary-black);
                            }

                            .title * {
                                margin-top: 0;
                                font-size: 1.5rem;
                                line-height: 1.875rem;
                                margin-bottom: .5rem;
                                font-weight: var(--fw-700);

                                @media (width>=1024px) {
                                  margin-bottom: 0.81rem;
                                  font-size: 2rem;
                                  line-height: 2.37rem;
                                }
                            }

                            .sub-title {
                                width: 320px;
                                font-size: .75rem;
                                line-height: normal;
                                font-weight: var(--fw-400);

                                @media (width>=768px) {
                                  width: 656px;
                                }

                                @media (width>=1024px) {
                                  font-size: 0.87rem;
                                  line-height: 1.25rem;
                                  width: 369px;
                                }
                            }

                            .cta-container {
                              gap: 8px;
                              display: flex;
                              flex-direction: column;
                              font-family: var(--body-font-arena);
                              margin-top: 24px;

                              @media(width >=768px) {
                                align-items: center;
                              }

                              @media (width >=1024px) {
                                flex-direction: row;
                                justify-content: space-between;
                                align-items: center;
                              }

                              .buttons-wrapper {
                                display: flex;
                                flex-direction: column;
                                gap: 8px;

                                @media (width >=768px) {
                                  display: flex;
                                  flex-direction: column;
                                }
                                @media (width >=1024px) {
                                  flex-direction: row;
                                  gap: 16px;
                                }
                              }

                              .compare-cars {
                                display: none;
                                color: var(--tertiary-white);
                                text-decoration: underline;
                                font-weight: var(--fw-400);
                                font-size: 0.875rem;

                                @media (width >=1024px) {
                                  display: inline-block;
                                }
                              }

                              a.button {
                                  font-weight: 400;
                                  font-style: normal;
                                  font-size: 0.875rem;
                                  line-height: 18px; /* 128.571% */

                                  @media(width >=768px) {
                                    width: 316px;
                                  }

                                  @media(width >=1024px) {
                                    width: auto;
                                    font-size: 1rem;
                                  }
                                  &.button-primary-blue{
                                    border: none;
                                  }
                              }

                              .button-normal-link {
                                  color: var(--tertiary-white);
                                  text-decoration: underline;
                              }

                              .button-download-brochure {
                                  color: var(--tertiary-white);
                                  border: 1px solid var(--tertiary-white);

                                  &:hover{
                                    border: 1px solid var(--primary-blue-900);
                                    color: var(--tertiary-white);
                                    background-color: var(--primary-blue-900);
                                  }

                                  @media(width>=1024px){
                                    color: var( --primary-blue-700);
                                    border: 1px solid var(--primary-blue-700);
                                  }
                              }
                          }
                        }
                    }
          
                    .container {
                        height: 100%;
                        padding: 0;
                        max-width: 100%;
                        position: relative;
                        margin-top: -23px;
                        @media (width>=1366px){
                          margin-top: -241px;
                          width: 100%;
                        }
                        
                        .variant-details-container {
                          display: flex;
                          flex-direction: column;
                          padding-bottom: 36px;
                          z-index: 1;
                          position: relative;

                          @media(width < 1024px){
                            background: linear-gradient(180deg, #454E51 0%, #44647B 100%);
                          }

                            .variant-info,
                            .variant-details {
                                margin: 0;
                            }
                            .variant-details {
                                gap: 17px;
                                display: flex;
                                flex-direction: column;

                                @media(width >=768px){
                                  margin-left: 20px;
                                  margin-right: 20px;
                                }

                                @media(width >=1024px) {
                                  flex-direction: row;
                                  padding-bottom: 69px;
                                  gap: 20px;
                                }
                                /* @media (width >=1920px){
                                  padding-bottom: 69px;
                                } */

                                .variant-info {
                                  border-bottom: 1px solid var(--tertiary-white);
                                  flex: 1 0 0;
                                  @media(width>=1024px) {
                                    border:none;
                                  }
                                  .variant-info-specs{
                                    display: none;
                                  }
                                  .variant-info-details{
                                    @media (width <1024px){
                                      display: none;
                                    }
                                  }
                                  .variant-info-title{
                                    padding-bottom: 5px;
                                    @media (width >=1024px){
                                      padding-bottom: 8px;
                                    }
                                  }

                                    &.expanded {
                                      .variant-info-details {
                                          display: block;
                                      }
                                      .variants::after{
                                        transform: rotate(180deg);
                                      }
                                      .variant-info-title{
                                        padding-bottom: 8px;
                                      }
                                      .variant-info-details .variant-info-specs{
                                        display: flex;
                                      }
                                      .variant-info-details .variant-info-price{
                                        @media (width <=1024px){
                                          display: flex;
                                        }
                                      }
                                    }

                                    .variant-info-title {
                                        button {
                                            display: flex;
                                            align-items: center;
                                            justify-content: space-between;
                                            width: 100%;
                                            border: none;
                                            background: none;
                                            padding: 0;
                                            cursor: pointer;

                                            @media(width >=1024px) {
                                              justify-content: space-between;
                                              border-bottom: 1px solid var(--tertiary-white);
                                              gap: 16px;
                                              padding-bottom: 16px;
                                            }
                                        }

                                        h2,
                                        h3,
                                        h4,
                                        h5 {
                                            margin: 0;
                                            color: var(--tertiary-white);
                                            font-size: 1.25rem;
                                            font-style: normal;
                                            font-weight: var(--fw-400);
                                            line-height: 140%;
                                            text-transform: uppercase;

                                            @media (width>=1024px) {
                                              font-size: 2rem;
                                              line-height: 44.8px;
                                              font-weight: var(--fw-700)
                                            }
                                        }
                                        .variants {
                                            &::after{
                                              content: '';
                                              display: block;
                                              background: url('/icons/variant-expand-more-desktop.png');
                                              width: 24px;
                                              height: 24px;
                                              background-size: 24px;
                                              @media (width >=1024px){
                                                width: 32px;
                                                height: 32px;
                                                background-size: 32px;
                                              }
                                            }
                                        }
                                    }

                                    .variant-info-details {
                                        color: var(--tertiary-white);
                                        font-family: var(--body-font-arena);
                                        flex-direction: column;
                                        padding-bottom: 20px;
                                        @media (width>=1024px){
                                          padding-bottom: 1rem;
                                        }
                                        @media (width>= 1366px){
                                          padding-bottom: 0;
                                        }

                                        .partitioned-sentence {
                                            display: inline-flex;
                                            align-items: center;
                                        }
                                        .partition {
                                            width: 1px;
                                            height: 12px;
                                            background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFF 50%, rgba(255, 255, 255, 0) 100%);
                                            margin: 0 10px;

                                            @media(width>=1024px){
                                              margin: 0 24px;
                                           }

                                            span {
                                                display: inline-block;
                                            }
                                        }
                                        .variant-info-specs {
                                            font-size: 0.75rem;
                                            line-height: 140%;
                                            padding-right: 4px;
                                            font-style: normal;
                                            font-weight: var(--fw-400);
                                            align-items: center;
                                            justify-content: flex-start;
                                            flex-wrap: wrap;
                                            display: none;
                                        }
                                        .variant-details-list{
                                          width: 100%;
                                        }
                                        .variant-details-list .variant-details-list-items{
                                          display: flex;
                                          align-items: center;
                                          row-gap: 8px;
                                          column-gap: 16px;
                                          align-self: stretch;
                                          flex-wrap: wrap;
                                          @media (width>=1024px){
                                            gap: 11px;
                                          }
                                          a{
                                            width: 47%;
                                            padding: 8px;

                                            color: var(--tertiary-white);
                                            font-weight: var(--fw-500);
                                            font-family: var(--body-font-arena);
                                            font-size: 12px;
                                            line-height: normal;
                                            background: rgba(29, 29, 29, 0.30);
                                            white-space: normal;
                                            @media (width >=768px){
                                              background: none;
                                              width: 48.5%;
                                            }
                                            &:hover{
                                              background: rgba(255, 255, 255, 0.20);
                                            }
                                          }
                                        }
                                        .transmission-title{
                                          margin: 12px 0 16px;
                                          font-family: var(--body-font-arena);
                                          font-size: 14px;
                                          font-weight: var(--fw-400);
                                          line-height: normal;
                                          @media (width>=1024px){
                                            margin: 12px 0;
                                            font-weight: var(--fw-700);
                                            line-height: 20px;
                                          }
                                        }
                                        .variant-info-price {
                                            align-items: center;
                                            justify-content: space-between;
                                            margin-top: 20px;
                                            gap: 4px;
                                            display: none;
                                            @media (width >=1024px){
                                              display: flex;
                                              margin-top: 24px;
                                            }


                                            .ex-showroom-price {
                                                font-size: 14px;
                                                line-height: normal;
                                                font-weight: var(--fw-700);

                                                @media (width>=1024px) {
                                                  font-size: 1.25rem;
                                                }
                                            }

                                            .price-text {
                                                line-height: 1.25rem;
                                                font-size: 0.75rem;
                                                font-weight: var(--fw-300);
                                            }

                                            .anchor-btn {
                                                width: 24px;
                                                display: block;
                                                height: 24px;
                                                background: url('/icons/north_east-white.svg');
                                                background-repeat: no-repeat;
                                                background-size: contain;
                                                @media (width>=1024px){
                                                  width: 32px;
                                                  height: 32px;
                                                }
                                            }
                                        }

                                    }
                                }
                            }
                            .variant-details:has(.variant-info.expanded){
                              padding-bottom: 4px;
                            }
                            .cta-container {
                                gap: 8px;
                                display: flex;
                                flex-direction: column;
                                font-family: var(--body-font-arena);
                                margin-top: 28px;
                                @media(width >=768px) {
                                  align-items: center;
                                }

                                @media (width >=1024px) {
                                  flex-direction: row;
                                  justify-content: space-between;
                                  align-items: center;
                                }

                                .buttons-wrapper {
                                  display: flex;
                                  flex-direction: column;
                                  gap: 8px;

                                  @media (width >=768px) {
                                    display: flex;
                                    flex-direction: column;
                                  }
                                  @media (width >=1024px) {
                                    flex-direction: row;
                                    gap: 16px;
                                  }
                                }

                                .compare-cars {
                                  display: none;
                                  color: var(--tertiary-white);
                                  text-decoration: underline;
                                  font-weight: var(--fw-400);
                                  font-size: 0.875rem;

                                  @media (width >=1024px) {
                                    display: inline-block;
                                  }
                                }

                                a.button {
                                    font-weight: 400;
                                    font-style: normal;
                                    font-size: 0.875rem;
                                    line-height: 18px; /* 128.571% */
                                    padding: 8px 16px;
                                    height: 34px;

                                    @media(width >=768px) {
                                      width: 316px;
                                    }

                                    @media(width >=1024px) {
                                      width: auto;
                                    }
                                    &.button-primary-blue{
                                      border: none;
                                    }
                                }

                                .button-normal-link {
                                    color: var(--tertiary-white);
                                    text-decoration: underline;
                                }

                                .button-download-brochure {
                                    color: var(--tertiary-white);
                                    border: 1px solid var(--tertiary-white);

                                    @media(width>=1024px){
                                      color: var( --primary-blue-700);
                                      border: 1px solid var(--primary-blue-700);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

    }
}
.variant-overlay-wrapper::before{
  content: '';
  display: block;
  height: 252px;
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 4, 75, 0.50) 0%, rgba(29, 29, 29, 0.00) 100%);
}

@media(width >=1024px) {
      .variant-details-container::after {
        content: '';
        height: 301px;
        width: 100%;
        display: block;
        position: absolute;
        left: 0;
        z-index: -1;
        bottom: 0;
        background: linear-gradient(180deg, rgba(29, 29, 29, 0.00) 0%, #1D1D1D 24.92%);
    }
 
    .variant-overlay-wrapper::before{
        height: 301px;
        background: linear-gradient(360deg, rgba(29, 29, 29, 0.00) 0%, rgba(29, 29, 29, 0.20) 49.83%);
    }
    .variant-details-container:has(.variant-info.expanded)::after{
      height: var(--overlay-height, 490px);
    }
  }

    .variant-details-wrapper .right-cta .button-secondary-download.button-icon::before {
        height: 24px;
        width: 24px;
        left: 0px;
        top: 6px;
    }

     /* .section.variant-listing-container {
        min-height: 768px;
    }  */

    .variant-listing .variant_list img {
        object-position: center;
        transform: scale(1);
        object-fit: cover;
    }

    .variant-details-wrapper .variant-cta {
        display: flex;
        align-items: center;
        justify-content: space-between;

    }

    .variant-details .variant-info-details,
    .variant-details .variant-info-price {
        display: block;
    }

    .variant-details-wrapper .right-cta {
        position: static;
        bottom: 24px;
    }

    .variant-overlay-wrapper .variant-details {
        flex-direction: row;
        gap: 24px;
        padding-bottom: 0;
    }

    .variant-overlay-wrapper .variant-details .variant-info {
        flex-grow: 1;
    }

    .variant-overlay-wrapper .variant-details .variant-info-details {
        color: var(--tertiary-white);
        font-size: .75rem;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        text-transform: capitalize;
        display: flex;
        gap: 1%;
        white-space: nowrap;
        flex-wrap: wrap;
    }

    .variant-overlay-wrapper .variant-details .variant-info-price {
        color: var(--tertiary-white);

        .ex-showroom {
            font-family: var(--body-font-family);
            font-size: 1.5rem;
            font-style: normal;
            font-weight: 700;
            line-height: 1.875rem;
        }

        .price-text {
            font-family: var(--body-font-arena);
            font-size: .75rem;
            font-style: normal;
            font-weight: var(--fw-300);
            line-height: 1rem;
            text-transform: capitalize;
            padding-top: 5px;
        }
    }

    .variant-details-wrapper .title * {
        font-size: 1.25rem;
        line-height: 1.5rem;
    }

    .variant-details-wrapper .sub-title {
        font-size: .75rem;
        line-height: 1rem;
        width: 370px;
    }

    .variant-details .variant-info-title {
        justify-content: left;

        h2,
        h3,
        h4,
        h5 {
            font-size: 1rem;
            line-height: 1.25rem;
        }

        padding-bottom: 8px;
    }



@media(width >=1200px) {
    .variant-details-wrapper .title * {
        font-size: 1.5rem;
        line-height: 1.625rem;
    }

    .variant-listing .variant_list img {
        object-position: center;
        transform: scale(1);
        object-fit: cover;
    }

    .variant-details-wrapper .sub-title {
        font-size: .875rem;
        line-height: 1.25rem;
    }

    .variant-overlay-wrapper .variant-details .variant-info-details {
        gap: 3%;
    }

    .variant-details .variant-info-title {

        h2,
        h3,
        h4,
        h5 {
            font-size: 1.5rem;
            line-height: 1.625rem;
        }

        padding-bottom: 16px;
    }
}

@media(width >=1366px) {
    .variant-details-wrapper .title * {
        font-size: 2rem;
        line-height: 2.375rem;
    }

    .variant-details-wrapper .sub-title {
        font-size: .875rem;
        line-height: 1.25rem;
    }

    .variant-details .variant-info-title {

        h2,
        h3,
        h4,
        h5 {
            font-size: 2rem;
            line-height: 2.5rem;
        }

    }
}