@media only screen and (max-width: 768px) {
          .titleContainer{
            display: block !important;
           }
           .iam{
                font-size: 30px !important;
            }
            .text{
                font-size: 30px !important;
            }
        }
        @media (min-width: 600px) {
          .grid-container { 
              grid-template-columns: repeat(2, 1fr); 
          }
          .titleContainer{
            display: block;
           }
        }
        @media (min-width: 900px) {
          .grid-container { 
              grid-template-columns: repeat(3, 1fr); 
          }
          .titleContainer{
            display: block;
          }
        }
        .grid-container {
          display: grid;
          grid-gap: 1rem;
        }
        .titleContainer{
            display: flex;
            justify-content: center;
            align-items: center
        }
        img {
          border:solid 2px;
          border-bottom-color:#ffe;
          border-left-color:#eed;
          border-right-color:#eed;
          border-top-color:#ccb;
          max-height:100%;
          max-width:100%;
        }
        .frame {
          cursor:pointer;
          margin:0.5rem;
          text-align: center;
          background-color:#ddc;
          border:solid 5vmin #eee;
          border-bottom-color:#fff;
          border-left-color:#eee;
          border-radius:2px;
          border-right-color:#eee;
          border-top-color:#ddd;
          box-shadow:0 0 5px 0 rgba(0,0,0,.25) inset, 0 5px 10px 5px rgba(0,0,0,.25);
          box-sizing:border-box;
          display:inline-block;
          height:50vh;
          padding:2vmin;
          position:relative;
          text-align:center;
          display: flex;
          justify-content: center;
          align-items: center;
          &:before {
            border-radius:2px;
            bottom:-2vmin;
            box-shadow:0 2px 5px 0 rgba(0,0,0,.25) inset;
            content:"";
            left:-2vmin;
            position:absolute;
            right:-2vmin;
            top:-2vmin;
          }
          &:after {
            border-radius:2px;
            bottom:-2.5vmin;
            box-shadow: 0 2px 5px 0 rgba(0,0,0,.25);
            content:"";
            left:-2.5vmin;
            position:absolute;
            right:-2.5vmin;
            top:-2.5vmin;
          }
        }
        .iam{
            color: white;
            font-size: 55px;
            padding: 15px;
            font-family: sans-serif;
        }
        .text{
            color: white;
            border-right: 2px solid white;
            font-size: 55px;
            font-family: sans-serif;
        }
        
        /* The Modal (background) */
        .modal {
          display: block; /* Hidden by default */
          position: fixed; /* Stay in place */
          z-index: 1; /* Sit on top */
          padding-top: 100px; /* Location of the box */
          left: 0;
          top: 0;
          width: 100%; /* Full width */
          height: 100%; /* Full height */
          overflow: auto; /* Enable scroll if needed */
          background-color: rgb(0,0,0); /* Fallback color */
          background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
        }
        .closeIcon{
            color: white;
            font-size: 39px;
            font-weight: bold;
            cursor: pointer;
            }
        
        /* Modal Content (image) */
        .modal-content {
          margin: auto;
          display: block;
          width: 80%;
          max-width: 700px;
        }
        
        /* Caption of Modal Image */
        #caption {
          margin: auto;
          display: block;
          width: 80%;
          max-width: 700px;
          text-align: center;
          color: #ccc;
          padding: 10px 0;
          height: 150px;
        }
        
        /* Add Animation */
        .modal-content, #caption {  
          -webkit-animation-name: zoom;
          -webkit-animation-duration: 0.6s;
          animation-name: zoom;
          animation-duration: 0.6s;
        }
        
        @-webkit-keyframes zoom {
          from {-webkit-transform:scale(0)} 
          to {-webkit-transform:scale(1)}
        }
        
        @keyframes zoom {
          from {transform:scale(0)} 
          to {transform:scale(1)}
        }
        
        /* The Close Button */
        .close {
          position: absolute;
          top: 15px;
          right: 35px;
          color: #f1f1f1;
          font-size: 40px;
          font-weight: bold;
          transition: 0.3s;
        }
        
        .close:hover,
        .close:focus {
          color: #bbb;
          text-decoration: none;
          cursor: pointer;
        }
        .input-elevated{
            font-size: 16px;
            line-height: 1.5;
            border: none;
            background: #FFFFFF;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path fill='%23838D99' d='M13.22 14.63a8 8 0 1 1 1.41-1.41l4.29 4.29a1 1 0 1 1-1.41 1.41l-4.29-4.29zm-.66-2.07a6 6 0 1 0-8.49-8.49 6 6 0 0 0 8.49 8.49z'></path></svg>");
            background-repeat: no-repeat;
            background-position: 10px 10px;
            background-size: 20px 20px;
            box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
            border-radius: 5px;
            width: 300px;
            padding: .5em 1em .5em 2.5em;
        } 
        
        /* 100% Image Width on Smaller Screens */
        @media only screen and (max-width: 700px){
          .modal-content {
            width: 100%;
          }
        }