.detail-product {
   display: grid;
   row-gap: 4rem;
}

.product-focus {
   display: grid;
   grid-template-columns: repeat(auto-fit, 30rem);
   gap: 3rem;
   justify-content: center;
   padding: 8rem 1.5rem 5rem;
   border-bottom: solid 1px var(--black2);
   }

   @media only screen and (max-width: 29.6875em){
      .product-focus {
         padding: 12rem 1.5rem 5rem;
         max-width: 100vw;
      }
   }

   .product-focus-options {
      display: grid;
      grid-template-columns: 14rem 14rem;
      column-gap: 2rem;
   }
   
   .focus-option {
      display: grid;
      justify-items: center;
      row-gap: 1rem;
      }

      .caption{
         display: grid;
         row-gap: 1rem;
         margin-top: 1.5rem;
         text-align: center;
         font-size: 1.25rem;
         letter-spacing: 0.02rem;
      }

   .dpsf-image {
      display: grid;
      padding: 1rem;
      align-self: center;
      justify-self: center;
      max-width: 17rem;
      max-height: 60vh;
      object-fit: cover;
      cursor: pointer;
   }
   
   .dpsf-description {
      display: grid;
      row-gap: 1rem;
      max-width: 30rem;
      align-content: center;
      justify-content: center;
      color: var(--light);
      }

      .font-lg {
         font-size: 1.5rem;
         letter-spacing: 0.04rem;
         }
         .bundled {
            text-decoration: line-through;
            color: var(--black3);
            opacity: 0.75;
         }

      .font-grand {
         font-size: 2rem;
      }

   .super {
      vertical-align: top;
      font-size: 70%;
   }

      .add-remove-btns {
         display: grid;
         grid-template-columns: repeat(2, 3rem);
         gap: .5rem 1.5rem;
         }

         .btn-title {
            grid-column: 1/-1;
            display: grid;
            justify-self: center;
            font-size: 1.25rem;
            margin-top: 1rem;
            }
            .in-cart {
               color: rgb(45, 105, 255);
            }

            .choice {
               width: 3rem;
               cursor: pointer;
            }

   .dp-section {
      max-width: 100vw;
      margin: 3rem 0;
      padding: 0 1rem 3rem;
      border-bottom: solid 1px var(--black2);
      }
   
      .dps-area {
         display: grid;
         gap: 1.5rem;
         }

         .section-title {
            font-size: 2rem;
            text-align: center;
         }

         .dpsa-title {
            font-size: 1.5rem;
            text-align: center;
            }

            .micName {
               font-size: 1.75rem;
               font-weight: 400;
            }
         
         .dpsa-desc {
            color: var(--light);
            font-size: 1.1rem;
            max-width: 40rem;
            justify-self: center;
         }

         .dpsa-details {
            display: grid;
            justify-content: center;
            grid-template-columns: repeat(auto-fit, 20rem);
            gap: 3rem 1.5rem;
            margin-top: 3rem;
            }

            @media only screen and (max-width: 29.6875em){
               .dpsa-details {
                  grid-template-columns: repeat(auto-fit, 17rem);
               }
            }

            #info-prompt {
               position: absolute;
               font-size: 2.5rem;
               transition: none;
               transform: translate(-50%, -50%);
               top: 50vh;
               left: 50vw;
               height: fit-content;
               max-height: 70vh;
               width: 50vw;
               max-width: 90vw;
               object-fit: contain;
               border: solid 2px var(--red2);
               border-radius: 5px;
               box-shadow: 0 0 1.5rem var(--light);
               padding: 3rem;
               z-index: 20;
               background-color: var(--black1);
               color: var(--gold);
               text-align: center;
               cursor: pointer;
            }

            .hidden {
               display: none;
            }
         
         .dpsa-detail-points {
            display: grid;
            justify-content: center;
            grid-template-columns: repeat(auto-fit, 15rem);
            gap: 3rem;
            margin-top: 3rem;
            }

            .dpsad-wrapper {
               display: grid;
               grid-template-rows: 4rem max-content;
               padding: 1rem;
               color: var(--light);
               }
   
               .dpsad-title {
                  height: 3.75rem;
                  align-items: center;
                  text-align: center;
                  padding: .5rem;
                  opacity: .85;
                  font-size: 1.1rem;
               }
                  
               .dpsad-description {
                  display: grid;
                  padding: .5rem;
                  row-gap: .5rem;
               }

            .cd-card {
               display: grid;
               grid-template-rows: 2rem 10rem max-content;
               row-gap: 1.5rem;
               justify-items: center;
               padding: 1rem;
               color: var(--light);
               }

               .cdc-title {
                  display: grid;
                  align-self: start;
               }

               .cd-image {
                  height: 10rem;
                  width: 10rem;
                  object-fit: contain;
                  cursor: pointer;
               }

         .com-image {
            display: grid;
            height: 12rem;
            align-items: center;
            }

         .i-card {
            display: grid;
            box-shadow: 0 0 0.15rem var(--black3);
            grid-template-rows: 4rem 12rem auto 10rem;
            color: var(--light);
            background-color: var(--black1);
            padding: 1rem .5rem;
            }

            .ic-title {
               height: 3.75rem;
               align-items: center;
               text-align: center;
               padding: .5rem;
               opacity: .85;
               font-size: 1.1rem;
            }

            .ic-image {
               margin-bottom: .5rem;
               height: 10rem;
               width: 100%;
               object-fit: contain;
               }
               
               .ic-description {
                  display: grid;
                  padding: 1rem;
               }
               @media only screen and (max-width: 29.6875em){
                  .ic-description {
                     padding: .5rem;
                  }
               }

               .add-to-cart {
                  display: grid;
                  border-top: solid 1px var(--black2);
                  justify-content: center;
                  padding: 1.5rem 1rem;
               }

               .clt-text{
                  grid-column: 1/-1;
               }

               .oda-title {
                  grid-column: 1/-1;
                  justify-self: center;
                  font-size: 1.12rem;
                  font-weight: 600;
               }

.dpsa-media {
   display: grid;
   gap: 1rem;
   margin-bottom: 7rem;
   }

   .area-media-focus {
      display: grid;
      width: 80vw;
      justify-self: center;
      }

      .media-focus {
         display: grid;
         height: 45vw;
      }


.focus-image {
   transition: none;
   position: absolute;
   transform: translate(-50%, -50%);
   top: 50vh;
   left: 50vw;
   background-color: var(--light);
   height: auto;
   max-height: 70vh;
   width: auto;
   max-width: 90vw;
   object-fit: contain;
   border: solid 2px var(--red2);
   border-radius: 5px;
   padding: 3rem;
   z-index: 20;
   box-shadow: 0 0 1.5rem var(--light);
   }

   .focus-image:hover {
      transform: scale(1) translate(-50%, -50%);
   }