:root {
     /* Define a variable for a common breakpoint */
     --tablet-breakpoint: 768px;

     /* * {
         border: 1px solid red;
     } */
 }

 body {
     margin: 0;
     height: 100vh;
     background: #EFEFEF;
     font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
     color: #111111;
     text-align: center;
 }

 .images {
     margin-top: 3rem;
     display: flex;
     width: 100%;
     margin-bottom: 3rem;
     justify-content: center;
     height: 555px;
 }

 .img-wrapper {
     display: flex;
     align-items: center;
     height: 100%;
 }

 .img-wrapper img {
     max-height: 100%;
     width: auto;
     max-width: 90%;
     display: block;
     margin: auto;
 }

 .text {
     max-width: 600px;
     margin: 0 auto 20px;
     padding: 20px;
     background: #fff;
     border-radius: 10px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }

 .contact,
 .address {
     padding: 1rem 0;
 }

 span {
     display: block;
     margin: 10px;
 }

 @media (max-width: 768px) {
     .images {
         flex-direction: column;
         height: auto;
     }

        .img-wrapper {
            height: auto;
            max-width: 80%;
            width: 300px;
            margin: 2rem auto;
        }
 }