style.css

<!-- PEPSI NITRO -->
<a class="deeplink-anchor" name="pepsinitro"></a>
<section id="pepsi_nitro" data-promo-id="pepsi_nitro-sugar" class="fly-in pepsi-nitro-promo" style="height: auto">
      <style>
         @font-face {
            font-family: AvinerBold;
            src: url("https://www.pepsi.com/en-us/assets/fonts/AvenirNextLTPro-Bold.otf") format('opentype');
            font-weight: 500;
         }

         .pepsi-nitro-container {
            background-image: url(https://www.pepsi.com/en-us/uploads/images/nitro/Tablet_Background.png);
            background-repeat: no-repeat;
            background-size: cover;
            width: 100%;
            display: flex;
            justify-content: center;
         }

         .pepsi-nitro__flex {
            display: flex;
            flex-direction: column;
            padding: 6vw 0;
            /* width: 80%; */
         }

         .pepsi-nitro__flex-child {
            display: flex;
            flex-direction: column;
            align-items: center;
         }

         .pepsi-nitro__flex-child:first-of-type img {
            width: 46vw;
         }

         .pepsi-nitro__flex-child:last-of-type img {
            width: 57vw;
         }

         .pepsi-nitro__flex-child button {
            margin: 0 0 6vw 0px;
         }
         .pepsi-nitro__flex-child h1 {
            font-size: 5vw;
            line-height: 0;
            padding: 8vw 0;
            font-family: "AvinerBold";
         }

         @media screen and (min-width: 390px) {

            .pepsi-nitro__flex {
               padding: 9vw 0;
            }

            .pepsi-nitro__flex-child h1 {
               font-size: 6vw;
               padding: 9vw 0;
            }

            .pepsi-nitro__flex-child button {
               margin: 0 0 10vw 0px;
            }

            .pepsi-nitro__flex-child:first-of-type img {
               width: 53vw;
            }

            .pepsi-nitro__flex-child:last-of-type img {
               width: 73vw;
            }

         }

         @media screen and (min-width: 768px) {

            .pepsi-nitro-container {
               background-image: url(https://www.pepsi.com/en-us/uploads/images/nitro/Desktop_Background.png);
               background-position: 50% center;
            }

            .pepsi-nitro__flex {
               flex-direction: row;
               padding: 7vw 0 4vw 0;
            }

            .pepsi-nitro__flex-child {
               justify-content: center;
               flex: 50%;
               /* border:1px solid black; */
            }

            .pepsi-nitro__flex-child:last-of-type img {
               width: 79%;
            }

            .pepsi-nitro__flex-child h1 {
               font-size: 23px;
               line-height: 29px;
               padding: 2vw 0;
               text-align: center;
            }

            .pepsi-nitro__flex-child button {
               margin: 0;
            }

            .pepsi-nitro__flex-child:first-of-type img {
               /* width: 79%; */
               width: 276px;
            }

            .pepsi-nitro__flex-child:last-of-type img {
               /* width: 79%; */
               width: 282px;
            }

            .pepsi-nitro__flex-child:first-of-type {
               padding: 0 0 0 3vw;
            }

            .pepsi-nitro__flex-child:last-of-type {
               order: -1;
               align-items: flex-end;
               display: flex;
            }
         }

         @media screen and (min-width: 1024px) {

            .pepsi-nitro__flex-child h1 {
               font-size: 31px;
               line-height: 38px;
               padding: 2vw 0;
            }

            .pepsi-nitro__flex-child:first-of-type img {
               /* width: 79%; */
               width: 362px;
            }

            .pepsi-nitro__flex-child:last-of-type img {
               /* width: 79%; */
               width: 371px;
            }

            .pepsi-nitro__flex-child:first-of-type {
               padding: 0 0 0 2vw;
            }

            @media screen and (min-width: 1024px) {

               .pepsi-nitro__flex {
                  padding: 3vw 0 2vw 0;
               }

               .pepsi-nitro__flex-child h1 {
                  font-size: 31px;
                  line-height: 37px;
                  padding: 2vw 0;
               }

               .pepsi-nitro__flex-child:first-of-type img {
                  /* width: 79%; */
                  width: 362px;
               }

               .pepsi-nitro__flex-child:last-of-type img {
                  /* width: 79%; */
                  width: 371px;
               }

               .pepsi-nitro__flex-child:first-of-type {
                  padding: 0 0 0 3vw;
               }

            }

            @media screen and (min-width: 1366px) {

               .pepsi-nitro__flex {
                  padding: 3vw 0 2vw 0;
               }

               .pepsi-nitro__flex-child h1 {
                  font-size: 38px;
                  line-height: 46px;
                  padding: 2vw 0;
               }

               .pepsi-nitro__flex-child:first-of-type img {
                  width: 424px;
               }

               .pepsi-nitro__flex-child:last-of-type img {
                  width: 436px;
               }

               .pepsi-nitro__flex-child:first-of-type {
                  padding: 0px 0 0 2vw;
               }

               .pepsi-nitro__flex-child:last-of-type {
                  padding: 0 2vw 0 0;
               }

            }

            @media screen and (min-width: 1920px) {

               .pepsi-nitro__flex {
                  padding: 2vw 0 1vw 0;
               }

               .pepsi-nitro__flex-child h1 {
                  font-size: 51px;
                  line-height: 62px;
                  padding: 2vw 0;
               }

               .pepsi-nitro__flex-child:first-of-type img {
                  width: 571px;
               }

               .pepsi-nitro__flex-child:last-of-type img {
                  width: 586px;
               }

               .pepsi-nitro__flex-child:first-of-type {
                  padding: 0 0 0 2vw;
               }

               .pepsi-nitro__flex-child:last-of-type {
                  padding: 0 2vw 0 0;
               }

            }

            @media screen and (min-width: 2560px) {

               .pepsi-nitro__flex-child:first-of-type {
                  padding: 0 0 0 8vw;
               }

               .pepsi-nitro__flex-child:first-of-type img {
                  width: 571px;
               }

               .pepsi-nitro__flex-child:last-of-type img {
                  width: 563px;
               }

            }
            


         }

         
      </style>

      <!-- Pepsi mango -->
       <a class="deeplink-anchor" name="pepsi-mango"></a>
       <section id="pepsi-mango" data-promo-id="pepsi-mango" class="promotion pepsi-mango-promo">
          <style>
             .-desktop,
             .-tablet,
             .-tablet-land,
             .-ultra {
                display: none;
             }

             .tvc-thumb .promotion__video-cta-ani-override {
                font-family: Sofia Pro Black, Helvetica Neue, Helvetica, Arial,
                   sans-serif;
                font-size: 0.875rem;
                z-index: 1;
                margin: 0;
             }

             .tvc-thumb .promotion__video {
                width: initial;
                margin: 0;
                height: initial;
                min-height: initial;
             }

             .tvc-thumb .promotion__watch-now-container {
                position: absolute;
                text-align: center;
                background-color: #0065c3c7;
                padding: 7px 14px;
             }

             .tvc-thumb .promotion__video img {
                position: initial;
                top: initial;
                left: initial;
             }

             /*365px default*/
             #pepsi-mango {
                height: 667px;
                background: #2c629d url(https://www.pepsi.com/en-us/uploads/images/pepsi-mango/mango-bg.jpg) no-repeat fixed center;
                background-size: cover;
             }

             #pepsi-mango img {
                display: block;
             }

             .pepsi-mango-container {
                position: relative;
                width: 100%;
                height: 100%;
             }

             .pepsi-mango-container .mango-absolutes {
                position: absolute;
             }

             .pepsi-mango-container .headline {
                top: 7.5%;
                left: 6%;
                width: 64%;
             }

             .pepsi-mango-container .tvc-thumb {
                width: 45%;
                left: 6.5%;
                top: 61vw;
                z-index: 99;
             }

             .pepsi-mango-container .bottom-left {
                z-index: 1;
                bottom: 0;
                left: 0;
                width: 82%;
             }

             .pepsi-mango-container .bottom-right {
                bottom: 0;
                right: 0;
                width: 63%;
             }

             .pepsi-mango-container .mango-one {
                top: 2%;
                right: 4%;
                width: 24%;
             }

             .pepsi-mango-container .mango-two {
                margin-bottom: 63%;
                left: 5%;
                width: 24%;
                bottom: 0;
             }

             /* iphone 5 */
             @media only screen and (min-device-width: 320px) and (min-device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
                #pepsi-mango {
                   height: 568px;
                }
             }

             /* iphone 6, 6s, 7, 8 */
             @media only screen and (min-device-width: 375px) and (min-device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
                #pepsi-mango {
                   height: 667px;
                }
             }

             /*iphone x*/
             @media only screen and (min-device-width: 375px) and (min-device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
                #pepsi-mango {
                   height: 812px;
                }

                .pepsi-mango-container .tvc-thumb {
                   width: 53%;
                }

                .pepsi-mango-container .headline {
                   top: 2%;
                   left: 6%;
                   width: 68%;
                }

                .pepsi-mango-container .mango-one {
                   top: 1%;
                   right: 5%;
                   width: 22%;
                }

                .pepsi-mango-container .mango-two {
                   margin-bottom: 80vw;
                }
             }

             /* pixel 2 */
             @media only screen and (min-device-width: 411px) and (min-device-height: 731px) and (-webkit-min-device-pixel-ratio: 2.625) {
                #pepsi-mango {
                   height: 731px;
                }
             }

             @media only screen and (min-width: 500px) and (max-width: 767px) {
                #pepsi-mango {
                   height: 180vw;
                }

                .pepsi-mango-container .headline {
                  top: 9.5%
                }
             }

             @media screen and (min-width: 768px) {
                #pepsi-mango {
                   height: 133.5vw;
                }

                .pepsi-mango-container .headline {
                   top: 15%;
                   left: 6%;
                   width: 53%;
                }

                .pepsi-mango-container .tvc-thumb {
                   width: 33%;
                   left: 6%;
                   top: 53vw;
                   margin-top: 0;
                   z-index: 30;
                }

                .pepsi-mango-container .mango-twil {
                   bottom: 5%;
                   left: 3%;
                   width: 30%;
                   z-index: 20;
                }

                .pepsi-mango-container .bottom-left {
                   z-index: 40;
                   width: 92%;
                }

                .pepsi-mango-container .bottom-right {
                   width: 56.5%;
                }

                .-mobile,
                .-desktop {
                   display: none;
                }

                .-tablet {
                   display: inline;
                }
             }

             @media screen and (min-width: 948px) {
                #pepsi-mango {
                   height: 55vw;
                }

                .center-dots {
                   z-index: 0;
                   right: 0%;
                   bottom: 0;
                   width: 39.5vw;
                }

                .pepsi-mango-container .headline {
                   top: 12%;
                   left: 3%;
                   width: 29%;
                   z-index: 10;
                }

                .pepsi-mango-container .tvc-thumb {
                   width: 20%;
                   left: 3%;
                   top: 32vw;
                   z-index: 30;
                }

                .pepsi-mango-container .mango-twil {
                   bottom: 5%;
                   left: 3%;
                   width: 30%;
                   z-index: 20;
                }

                .pepsi-mango-container .bottom-left {
                   z-index: 1;
                   width: 101vw;
                }

                .pepsi-mango-container .bottom-right {
                   z-index: 2;
                   width: 73vw;
                   right: -7vw;
                }

                .-desktop {
                   display: block;
                }

                .-mobile,
                .-tablet {
                   display: none;
                }
             }

             /*ipad landscape*/
             @media only screen and (width: 1024px) and (height: 768px) {
                #pepsi-mango {
                   height: 668px;
                }

                .-tablet-land {
                   display: inline;
                }

                .-desktop {
                   display: none;
                }

                .center-dots {
                   display: inline;
                   right: -2.5vw;
                }

                .pepsi-mango-container .headline {
                   top: 5%;
                   left: 3%;
                   width: 38%;
                   z-index: 10;
                }

                /*gross-hack show desktop when it should be hidden*/
                .pepsi-mango-container .bottom-left.-desktop {
                   display: inline;
                   width: 120vw;
                   left: -2%;
                }

                /*same hack as above*/
                .pepsi-mango-container .mango-twil.-desktop {
                   display: inline;
                   width: 42%;
                }

                .pepsi-mango-container .bottom-right {
                   z-index: 2;
                   width: 64vw;
                   right: 0;
                }

                .pepsi-mango-container .tvc-thumb {
                   width: 24%;
                   top: 38vw;
                }
             }

             @media screen and (min-width: 1280px) {
                #pepsi-mango {
                   height: 54.5vw;
                }

                .pepsi-mango-container .bottom-right {
                   right: -5.5%;
                   width: 72%;
                }

                .pepsi-mango-container .bottom-left {
                   z-index: 1;
                   width: 98vw;
                }

                .pepsi-mango-container .tvc-thumb {
                   top: 32vw;
                }

                .center-dots {
                   width: 41.5vw;
                }
             }

             @media screen and (min-width: 1366px) {
                #pepsi-mango {
                   height: 49vw;
                }

                .pepsi-mango-container .headline {
                   width: 28%;
                }

                .pepsi-mango-container .tvc-thumb {
                   top: 28vw;
                }

                .pepsi-mango-container .bottom-right {
                   right: 0;
                   width: 65vw;
                }

                .pepsi-mango-container .bottom-left {
                   width: 94vw;
                }

                .center-dots {
                   width: 42vw;
                }
             }

             @media screen and (min-width: 1920px) {
                #pepsi-mango {
                   height: 51vw;
                }

                .pepsi-mango-container .headline {
                   width: 31%;
                }

                .pepsi-mango-container .center-dots {
                   width: 44vw;
                }

                .pepsi-mango-container .tvc-thumb {
                   top: 31vw;
                }

                .pepsi-mango-container .bottom-right {
                   width: 67%;
                   right: 0%;
                }

                .pepsi-mango-container .bottom-left {
                   width: 90%;
                }
             }

             @media screen and (min-width: 2560px) {
                #pepsi-mango {
                   height: 34.7vw;
                }

                .pepsi-mango-container .center-dots {
                   width: 32vw;
                }

                .pepsi-mango-container .bottom-right {
                   width: 46%;
                   right: 0%;
                }

                .pepsi-mango-container .bottom-left {
                   width: 90%;
                   bottom: -4.5vw;
                }

                .pepsi-mango-container .-not-ultra {
                   display: none;
                }

                .pepsi-mango-container .-ultra {
                   display: inline;
                   width: 45%;
                }

                .pepsi-mango-container .tvc-thumb {
                   width: 18%;
                   left: 3%;
                   top: 18vw;
                }
             }
          </style>