.content {
   display: grid;
   row-gap: 2rem;
   }

   .background-media {
      grid-row: 1/2;
      grid-column: 1/2;
      max-height: 93vh;
		width: 100%;
		object-fit: cover;
		z-index: -1;
		opacity: .4;
   }

   .focus-logo {
      grid-row: 1/2;
      grid-column: 1/2;
      display: grid;
      align-self: end;
      padding: 2rem;
      }

      .fl-attr {
         opacity: .15;
         max-width: 5rem;
         justify-self: end;
      }

      .st-text {
         line-height: 1.45;
         font-weight: normal;
         font-size: 1.25rem;
      }

   .product-wrapper {
      display: grid;
      margin-bottom: 3rem;
      justify-self: center;
      }

      .product {
         display: grid;
         grid-template-columns: minmax(10rem, 15rem) minmax(15rem, 80rem);
         column-gap: 1.5rem;
         align-content: center;
         padding: 1rem 1rem;
         border-top: solid 1px var(--black2);
         color: var(--light);
         background: linear-gradient(to right, var(--black1) 15%, rgba(51, 51, 51, 0.4), var(--black1) 85%);
         }

         .product:last-child{
            border-bottom: solid 1px var(--black2);
         }

         .product-image {
            display: grid;
            align-self: center;
            }

            .product-image:hover {
               transform: scale(1.03);
            }

            .product-link {
               display: grid;
               text-decoration: none;
               color: var(--light);
               }

               .heading {
                  line-height: 1.45;
                  font-weight: 600 ;
                  font-size: 1.5rem;
                  align-self: center;
               }

               .heading-link {
                  border-bottom: solid 2px var(--black2);
                  width: fit-content;
               }
            
               .cl-title {
                  grid-row: 1/2;
                  display: grid;
                  grid-template-columns: 3rem auto;
                  column-gap: 1rem;
                  align-items: center;
                  text-align: center;
                  padding: .5rem;
                  color: var(--light);
                  }
            
                  .clt-text{
                     grid-column: 1/-1;
                  }
            
               .cl-image {
                  grid-row: 2/3;
                  grid-column: 1/2;
                  align-self: end;
                  justify-self: center;
                  margin-bottom: .5rem;
                  opacity: .7;
                  height: 16rem;
                  max-width: 10rem;
                  object-fit: contain;
               }

         .product-options {
            display: grid;
            row-gap: 1rem;
            }

            .description {
               display: grid;
               row-gap: 1rem;
               padding: 1rem;
               }
            
            .options-data {
               display: grid;
               grid-template-columns: repeat(auto-fit, 18rem);
               gap: 1rem;
               margin: 1rem;
               }

               .options {
                  display: grid;
                  row-gap: 1rem;
               }

               .product-text {
                  line-height: 1.25;
                  font-size: 1.25rem;
               }

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

               .od-accessories {
                  display: grid;
                  gap: .5rem;
                  align-items: center;
                  align-self: center;
                  grid-template-columns: repeat(3, 1fr);
                  text-decoration: none;
                  color: var(--light);
                  }

                  .oda-title {
                     grid-column: 1/-1;
                     font-size: 1.12rem;
                     font-weight: 600;
                     padding: .5rem;
                     border-bottom: solid 1px var(--black2);
                  }
               
                  .acc {
                     background-color: var(--med);
                     color: var(--light);
                     text-align: center;
                     padding: .25rem;
                     border-radius: 3px;
                     width: 5rem;
                  }

.image-wrapper {
   display: grid;
   padding: 2rem 0;
   border-top: solid 1px var(--black3);
   }

   .image-collogue {
      display: grid;
      justify-content: center;
      grid-template-columns: repeat(auto-fit, 15rem);
      grid-template-rows: repeat(auto-fit, 10rem);
      gap: 1rem;
      padding: 3rem .5rem;
      align-self: baseline;
      }

      .icoll-image {
         height: 100%;
         width: 100%;
         object-fit: cover;
         cursor: pointer;
      }

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

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

      .ic-desc {
         color: var(--light);
      }