.grid-container {
          display: grid;
          grid-template-columns: auto auto auto;
          background-color: #fff;
          padding: 10%;
        }
        .grid-item {
          /*background-color: rgba(255, 255, 255, 0.8);*/
          /*border: 1px solid rgba(0, 0, 0, 0.8);*/
          padding: 1%;
          /*font-size: 30px;*/
          text-align: center;
        }
       

         article{
            background-color: #eeeeee;
            width: 95%;
            padding: 22%;
            height: 98%;
            margin-left: 3%;

         }

         article .a{
            /*margin-left:50%;*/
            font-weight: bolder;
            padding: 10%;
            align-content: right;

         }

        /*frame button .close{
          background-color:red; 
          margin-top: -100px;
          
         }*/


         @media (max-width: 768px) {

          article{                    
            margin-left: 1%;
          }

          iframe {
            width:100%;
            height:150%; 
            margin-top: -32%;

          }

          .frame{
            margin-left: -2px;
          }

         .grid-container {
          display: table;
          width: 95%;
          margin-left: -3%;
          padding: 10%;
         }

         .grid-item {
          padding: 10px;
          text-align: center;
         }

         .bottom{
           margin-top: 1%;
           width: 99%;
           margin-left: 4px;
         }

         #btn1,#btn2,#btn3,#btn4,#btn5{

              margin-top:-240px;
              margin-left: 9%;
          }

       }



       @media (max-width: 490px) {


          article{                    
                width:100%;
          }


          iframe {
            width:100%;
            height:150%;
            margin-top: -130%; 

          }

          .frame{
            margin-left: -2px;
          }

         .grid-container {
          display: table;
          width: 90%;
          margin-left: -1%

         }

         .grid-item {
          padding: 10px;
          text-align: center;
         }

         .bottom{
           /*margin-top: 23%;*/
           width:100%;
           margin-left: -1%;

          }

          #btn1,#btn2,#btn3,#btn4,#btn5{

              margin-top:-435px;
              margin-left: 9%;
          }


       }



       @media (max-width: 420px) {

          article{                    
            margin-left: -5%;
            width:100%;
          }

          iframe {
            width:100%;
            height:150%; 
            margin-top: -102%;

          }

          .frame{
            margin-left: -2px;
          }

         .grid-container {
          display: table;
          width: 90%;
          margin-left: -7%

         }

         .grid-item {
          padding: 10px;
          text-align: center;
         }

         .bottom{
           margin-top: 1%;
           width:101%;
           margin-left: -1%;
          }

          #btn1,#btn2,#btn3,#btn4,#btn5{

              margin-top:-405px;
              margin-left: 8%;
          }

       }


       @media (max-width: 414px) {


          article{                    
                width:100%;
          }


          iframe {
            width:100%;
            height:150%;
            margin-top: -105%; 

          }

          .frame{
            margin-left: -2px;
          }

         .grid-container {
          display: table;
          width: 90%;
          margin-left: -1%

         }

         .grid-item {
          padding: 10px;
          text-align: center;
         }

         .bottom{
           /*margin-top: 23%;*/
           width:100%;
           margin-left: -1%;

          }

          #btn1,#btn2,#btn3,#btn4,#btn5{

              margin-top:-415px;
              margin-left: 9%;
          }


       }


       @media (max-width: 412px) {


          article{                    
                width:100%;
          }


          iframe {
            width:100%;
            height:150%;
            margin-top: -105%; 

          }

          .frame{
            margin-left: -2px;
          }

         .grid-container {
          display: table;
          width: 90%;
          margin-left: -1%

         }

         .grid-item {
          padding: 10px;
          text-align: center;
         }

         .bottom{
           /*margin-top: 23%;*/
           width:100%;
           margin-left: -1%;

          }

          #btn1,#btn2,#btn3,#btn4,#btn5{

              margin-top:-410px;
              margin-left: 9%;
          }


       }


       @media (max-width: 390px) {


          article{                    
                width:100%;
          }


          iframe {
            width:100%;
            height:150%;
            margin-top: -115%; 

          }

          .frame{
            margin-left: -2px;
          }

         .grid-container {
          display: table;
          width: 90%;
          margin-left: -1%

         }

         .grid-item {
          padding: 10px;
          text-align: center;
         }

         .bottom{
           /*margin-top: 23%;*/
           width:100%;
           margin-left: -1%;

          }

          #btn1,#btn2,#btn3,#btn4,#btn5{

              margin-top:-420px;
              margin-left: 9%;
          }


       }


       @media (max-width: 360px) {


          article{                    
                width:100%;
          }


          iframe {
            width:100%;
            height:150%;
            margin-top: -130%; 

          }

          .frame{
            margin-left: -2px;
          }

         .grid-container {
          display: table;
          width: 90%;
          margin-left: -1%

         }

         .grid-item {
          padding: 10px;
          text-align: center;
         }

         .bottom{
           /*margin-top: 23%;*/
           width:100%;
           margin-left: -1%;

          }

          #btn1,#btn2,#btn3,#btn4,#btn5{

              margin-top:-435px;
              margin-left: 9%;
          }


       }