SASS file for main layout of the product tabs to handle benefit ratings, features, and tech modules split up into "2 tabs"

product-tabs-test-main-layout.scss

@media (min-width: $small) {
  #container-4 {
    button, .button{
      display:none;
    }

    button.benefit-rating-info {
      display:inline-block;
    }
  }
}


@media (min-width: $medium) {
  body.pdp {

    #product-info {
      .pr-snippet-slider-root{
        display:none;
      }
    }

    #container-4 {
      iframe{
        display:none;
        height:320px;
        margin-top:2em;
      }

      .button{
        display:block;
      }

      .swatches-product-details-container {
        .swatches-product-details.row {
          display: block;
          position: relative;
          padding: 3em 0.5em 1em 0.5em;
          max-width: 1108px;  

          hr {
            top: -1px;
            margin: 0 auto;
          }

          button:focus {
            outline: 0;
          }

          h1 {
            padding: 0.5em 0 0.5em 0;
          }

          h3 {
            font-size: 1.25rem;
            padding: 0 2em 0.5em 0;
            color: #777;
          }

          .pdp-tabs-ctas {
            padding: 0;
            text-align: center;
            position:relative;
            z-index:1;

            button {
              display:inline-block;
              background-color: transparent;
              color: black;
              padding: 0;
              opacity: 0.5;
              margin: 0 0.5em;
              min-width: 75px;
              padding-bottom: 1em;

              &:hover {
                opacity: 0.3;
              }
            }

            .pdp-active-tab {
              border-bottom: 2px solid #2a2a2a;
              opacity: 1;

              &:hover {
                color: #2a2a2a;
                opacity: 1;
                cursor: auto;
              }
            }
          }

          .pdp-details,
          .pdp-specifications {
            display: flex;
            flex-wrap: wrap;
            padding-top: 0.5em;

            &:focus {
              outline: 0;
            }

            &-header {
              flex: 0 0 100%;
            }

            .inner-content {
              padding-left: 0;
            }
          }

          .pdp-specifications {
            padding-left: 3em;

            &-list {
              border-bottom: none;
              dt,
              dd {
                padding: 0em 0.3em 0.5em 0;
                padding-right: 0.3em;
                padding-bottom: 0.5em;
              }
            }
          }

          .pdp-details {
            justify-content: space-evenly;

            .desc-container{
              .pr-snippet-stars-reco-inline{
                display:none;
              }
            }

            &-inner-content {
              padding: 0 3em 0 0;

              .benefit-rating__graph{
                &-container{
                  .br-labels {
                    padding-top: 0.5em;
                  }
                }
                &-bar{
                  height: 0.8rem;
                }
              }
            }

            .pdp-features {
              .inner-content {
                column-count: 2;
              }

              &-truncate {
                position: relative;

                div.button {
                  position: absolute;
                  top: 300px;
                  width: 100%;
                  border: transparent;
                  background: none;
                  text-decoration: underline;
                  text-transform: uppercase;
                  font-family: Neue Helvetica VFDP Cond, helvetica, sans-serif;
                  font-weight: 500;
                  letter-spacing: 0.03em;
                  margin: 0 auto;
                  font-size: 1.2rem;

                  &:hover {
                    background: transparent;
                    color: #e72b1e;
                  }
                }

                ul.pdp-features-list {
                  height: 300px;
                  position: relative;
                  overflow: hidden;
                  &:after {
                    content: "";
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    background-image: linear-gradient(rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 85%);
                    margin: -1%;
                  }
                }
              }
            }

            .pdp-details-inner-content,
            .pdp-features {
              display: inline-block;
              max-width: 44%;
            }

            .inner-content {
              .benefit-rating__graph-container {
                padding: 0px;
              }
            }

            .desc-container {
              h1 {
                padding: 2em 0 0.5em 0;
              }
            }
          }

          .pdp-tab-content.pdp-active-tab {
            display: flex;
            visibility: visible;
            opacity: 1;
            height: auto;
            transition: all 200ms ease-out;
          }

          .pdp-tab-content {
            display: none;
            transition: all 200ms ease-out;
          }
        }
      }
    }
  }

  // body.pdp-tabs-ab-test-dark {
  //   .benefit-rating__container
  //     .benefit-rating__graph-item[data-benefit-item-value="1"]
  //     .benefit-rating__graph-bar:nth-child(1),
  //   .benefit-rating__container
  //     .benefit-rating__graph-item[data-benefit-item-value="2"]
  //     .benefit-rating__graph-bar:nth-child(1),
  //   .benefit-rating__container
  //     .benefit-rating__graph-item[data-benefit-item-value="2"]
  //     .benefit-rating__graph-bar:nth-child(2),
  //   .benefit-rating__container
  //     .benefit-rating__graph-item[data-benefit-item-value="3"]
  //     .benefit-rating__graph-bar:nth-child(1),
  //   .benefit-rating__container
  //     .benefit-rating__graph-item[data-benefit-item-value="3"]
  //     .benefit-rating__graph-bar:nth-child(2),
  //   .benefit-rating__container
  //     .benefit-rating__graph-item[data-benefit-item-value="3"]
  //     .benefit-rating__graph-bar:nth-child(3) {
  //     background: radial-gradient(circle, #2a2a2a, #2a2a2a 70%, white 50%, white) !important;
  //     background-size: 3px 3px !important;
  //   }

  //   .desc-container {
  //     h1 {
  //       color: white;
  //     }
  //   }

  //   #container-4 {
  //     h3 {
  //       color: white;
  //     }

  //     .benefit-rating__graph-container {
  //       .br-labels {
  //         padding-top: 0.5em;
  //       }
  //     }

  //     .benefit-rating__graph-bar {
  //       border-right: 2px solid #2a2a2a;

  //       &:after {
  //         //background-color:#e72b1e;
  //         background: radial-gradient(circle, #2a2a2a, #2a2a2a 50%, white 50%, white);
  //         background-size: 3px 3px;
  //       }
  //     }
  //   }
  // }
}