.line {
  border-top: 3px solid #bbb;
}

.lowercase {
  text-transform: lowercase;
}

#pdp .panel-template .white {
  color: white;
}

.wrapper {
  width: 90% !important;
}

.cta-yellow {
  color: black !important;
  background-color: #ece81a !important;
  font-weight: bold !important;
  font-size: 15px !important;
  padding: 0.9em 1.5em !important;
}

#pdp .panel-template h3 {
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 1em 0;
  letter-spacing: 0.1rem;
}

#pdp .panel-template h3.yellow-subhead {
  font-size: 1.5rem;
  font-weight: normal;
  color: #ece81a;
  margin: 0.5em 0;
}

#pdp .panel-template h4 {
  font-size: 28px;
  font-weight: normal;
  color: #ece81a;
}
#pdp .panel-template h2 {
  line-height: 53px;
}
#pdp .panel-template h5 {
  color: #ece81a;
  font-size: 18px;
  letter-spacing: 0.2em;
  margin: 0;
}

#pdp .bebas {
  font-family: "BebasNeuePro-SmEBd", sans-serif;
  letter-spacing: 0.05em;
}

#pdp .panel-template p,
#pdp .panel-template .white p {
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 2.25rem;
  margin: 1em 0;
}

#pdp .panel-template .col-half {
  width: 50%;
}

#img-right {
  width: 38%;
  display: inline-block;
}
/* hero bulleted list */
.bullet-list {
  /* list-style-image: url(''); */
  list-style-type: disc;
  padding-left: 1.6vw;
}
#pdp .panel-template .overlay.dark {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.6337885495995272) 50%,
    rgba(133, 131, 131, 0) 100%
  );
}
#pdp .panel-template .overlay.dark.compatibility {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.6337885495995272) 10%,
    rgba(133, 131, 131, 0) 100%
  );
}
.bullet {
  font-size: 30px;
}
#pdp p.bullet-text {
  margin: 0 !important;
  color: white;
  font-size: 1.3rem !important;
}

#pc-vid {
  width: 100% !important;
}
.sm-w {
  width: 55%;
  margin: auto;
}

.m-overlay {
  z-index: -1;
}

/* ==============================
HERO
============================== */

#pdp #vivid-light {
  background: url("https://cwsmgmt.corsair.com/landing/nvidia-40series/images/Panel_1_Header_gradient_overlay.svg")
      no-repeat center,
    url("https://cwsmgmt.corsair.com/landing/nvidia-40series/images/nvidia-geforce-rtx-4090-gpu.webp")
      no-repeat right;
  background-color: black;
  background-size: cover, contain;
  padding: 3vw 0;
}

#pdp #compatibility {
  background: url("//cwsmgmt.corsair.com/landing/nvidia-40series/images/4090-V1-Shot-3-Label.webp")
      right no-repeat,
    url("https://cwsmgmt.corsair.com/landing/nvidia-40series/images/Panel_2_Trihex_Gradient_Overlay.svg")
      center no-repeat,
    url("https://cwsmgmt.corsair.com/landing/nvidia-40series/images/Panel_2_Trihex_Background.svg")
      left no-repeat;
  background-color: black;
  background-size: 800px, cover, cover;
}

#pdp #psu {
  background: url("https://cwsmgmt.corsair.com/landing/nvidia-40series/images/Trihex_Overlay_8%Opacity.svg")
      center no-repeat,
    url("https://cwsmgmt.corsair.com/landing/nvidia-40series/images/Panel_4_Image_Gradient_Overlay.svg")
      center no-repeat,
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) 51%,
      rgba(0, 0, 0, 0.337885495995272) 58%,
      rgba(133, 131, 131, 0) 100%
    ),
    url("//cwsmgmt.corsair.com/landing/nvidia-40series/images/DIY_Environmental_2021_24_Cropped.webp")
      right no-repeat;
  background-size: cover, cover, cover, contain;
  background-color: black;
}

#pdp #cables {
  background: url("https://cwsmgmt.corsair.com/landing/nvidia-40series/images/Panel_5_Image_Gradient_Overlay.svg")
      no-repeat center,
    url("https://cwsmgmt.corsair.com/landing/nvidia-40series/images/geforce-rtx-4090-product-gallery-full-screen-3840-3.webp")
      no-repeat center;
  background-size: cover;
}
#pdp #hydrox {
  background: url("https://cwsmgmt.corsair.com/landing/nvidia-40series/images/Trihex_Overlay_8%Opacity.svg")
      center no-repeat,
    url("https://cwsmgmt.corsair.com/landing/nvidia-40series/images/Panel_4_Image_Gradient_Overlay.svg")
      center no-repeat,
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 1) 51%,
      rgba(0, 0, 0, 0.337885495995272) 58%,
      rgba(133, 131, 131, 0) 100%
    ),
    url("//cwsmgmt.corsair.com/landing/nvidia-40series/images/RM1000e_13_Cropped.webp")
      right no-repeat;
  background-color: black;
  background-size: cover, cover, cover, contain;
}

#pdp #vivid-light.panel-template .white h1 {
  font-size: 7rem;
  font-weight: 700;
  line-height: 6.75rem;
  letter-spacing: 0.05em;
  margin-bottom: 0;
}

#pdp #hero-wrap h3.yellow-subhead {
  max-width: 700px;
  width: 100%;
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
}

/* ==============================
WHAT'S NEW
============================== */

#pdp #compatibility.panel-template .col-half {
  width: 53%;
}

/* ==============================
LEARN
============================== */

#pdp #learn.panel-template .col-half.video-wrap {
  width: 37%;
}

@media only screen and (max-width: 1580px) {
  #pdp .panel-template .overlay.dark.compatibility {
    display: block;
  }
}
@media only screen and (max-width: 1580px) {
  #pdp .vid-bg-wrapper video {
    width: unset !important;
    left: auto !important;
    right: -5% !important;
  }
  #pdp .panel-template .col-third,
  #pdp .panel-template .col-half {
    width: 65%;
  }

  #img-right {
    width: 29% !important;
  }
}

@media only screen and (max-width: 1000px) {
  #pdp .panel-template .overlay {
    display: block;
  }
  #pdp .panel-template .col-third,
  #pdp .panel-template .col-half {
    width: 100%;
    margin: 1em 0;
    padding: 0;
  }
  #img-right {
    width: 100% !important;
  }
  .sm-w {
    width: 90%;
  }

  #pdp section h1.bebas {
    font-size: 96px !important;
  }
}

@media only screen and (max-width: 768px) {
  #pdp .panel-template .overlay.dark.compatibility {
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.6337885495995272) 50%,
      rgba(133, 131, 131, 0) 100%
    );
  }
  #pdp #vivid-light {
    background: url("https://cwsmgmt.corsair.com/landing/nvidia-40series/images/Panel_1_Header_gradient_overlay.svg")
        no-repeat center,
      url("https://cwsmgmt.corsair.com/landing/nvidia-40series/images/nvidia-geforce-rtx-4090-gpu.png")
        no-repeat center;
    background-color: black;
    background-size: cover, cover;
    padding: 10vw 0;
  }
  #pdp #compatibility {
    /* align-content: center; */
    background: url("//cwsmgmt.corsair.com/landing/nvidia-40series/images/4090-V1-Shot-3-Label.webp")
        center no-repeat,
      url("https://cwsmgmt.corsair.com/landing/nvidia-40series/images/Panel_2_Trihex_Gradient_Overlay.svg")
        center no-repeat,
      url("https://cwsmgmt.corsair.com/landing/nvidia-40series/images/Panel_2_Trihex_Background.svg")
        center no-repeat;
    background-color: black;
    background-size: cover, cover, cover;
  }
  #pdp #psu {
    background: url("//cwsmgmt.corsair.com/landing/nvidia-40series/images/DIY_Environmental_2021_24_Cropped.webp")
        center no-repeat,
      url("https://cwsmgmt.corsair.com/landing/nvidia-40series/images/Panel_2_Trihex_Gradient_Overlay.svg")
        center no-repeat,
      url("https://cwsmgmt.corsair.com/landing/nvidia-40series/images/Panel_2_Trihex_Background.svg")
        center no-repeat;
    background-color: black;
    background-size: cover, cover, cover;
  }
  #pdp #hydrox {
    background: url("//cwsmgmt.corsair.com/landing/nvidia-40series/images/RM1000e_13_Cropped.webp")
        right no-repeat,
      url("https://cwsmgmt.corsair.com/landing/nvidia-40series/images/Panel_2_Trihex_Gradient_Overlay.svg")
        center no-repeat,
      url("https://cwsmgmt.corsair.com/landing/nvidia-40series/images/Panel_2_Trihex_Background.svg")
        center no-repeat;
    background-color: black;
    background-size: cover, cover, cover;
  }
  .bullet-list {
    padding-left: 5%;
  }
  #pdp h2 {
    font-size: 55px !important;
  }

  /* ==============================
    HERO
    ============================== */

  #pdp #vivid-light.panel-template .white h1 {
    font-size: 4rem !important;
    line-height: 4rem;
    white-space: unset;
  }

  #pdp .panel-template h3.yellow-subhead {
    font-size: 1.2rem;
  }

  #pdp #vivid-light.panel-template .white h1 br {
    display: none;
  }

  /* ==============================
    WHAT'S NEW
    ============================== */

  #pdp #compatibility.panel-template .col-half {
    width: 100%;
  }

  /* ==============================
    LEARN
    ============================== */

  #pdp #learn.panel-template .col-half.video-wrap {
    width: 100%;
  }
}