.contenedor-input {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin: auto;
 }



 .button-shadow {
     background-color: #4CAF50;
     border: none;
     color: white;
     padding: 10px 20px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     margin: 4px 2px;
     cursor: pointer;
     transition: 0.3s;
 }

 .button-shadow:hover {
     box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
 }



 .grid-container {
     display: grid;
     grid-template-columns: auto;
     grid-gap: 20px;
     padding: 20px;
     margin: 10px 20%;
 }


 .grid-item {
     display: flex;
     align-items: center;
     flex-direction: column;
 }


 .grid-item img {
     width: 40%;
     margin: auto;
 }

 .grid-item .content {

     border: 1px solid #ccc;
     padding: 20px;
     text-align: center;
     width: 100%;
 }

 .grid-container .grid-item:nth-last-child(1) .content {
   
     background-size: contain;
     background-position: center;

 }

 .contenedor-titulo {
     margin: 0;
     height: 10%;
     width: 100%;
     display: flex;
     align-items: center;

     background-color: #333;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 }

 .contenedor-titulo h1 {
     margin: auto;
     text-align: center;
     width: fit-content;

     top: 0;


     color: #fff;
     padding: 20px;
     margin: 0;
     width: 100%;
     text-align: center;
     z-index: 1000;


 }


 @media only screen and (max-width: 600px) {
     .grid-container {
         margin: 10px;
     }

 }

 @media only screen and (max-width: 900px) {
     .grid-container {
         margin: 10px;
     }
 }





 .swal2-html-container {
     color: white;
 }