@charset "UTF-8";
/* CSS Document */
 
 
body {background-color: #CBC096;}
 
p{color: rgb(0, 0, 0); font-weight: 400; padding: 0 5%;}
 
h1{font-weight: bold; font-size: 2em; padding-top: 5%;
   font-family:Georgia, 'Times New Roman', Times, serif;}

h2{font-weight: bold;
   font-size: 1.5em;
   font-family:Georgia, 'Times New Roman', Times, serif;}
 
 
footer{font-style: italic;
      background-color: #f8f9fa;}


 
.col {position: relative;}
 
.mask {
  width: 50%;
  height: 50%;
  position: absolute;
  top: 70px;
  left: 0.875em;
  text-align: center;
    opacity: 0;
  transition: linear 1s;
}

#low{margin-top: 10%;}

.mask:hover {
  opacity: 1;
}

#wrapper {
	width: 81.699%; /* 1000px/1224= 0.81699 * 100= 81.699% */
	margin-left: auto;
	margin-right: auto;
   background-color: #f8f9fa;}




.accomodation-container { display: flex; flex-wrap: wrap; gap: 20px;}

.accomodation{ display: flex; align-items: center; gap: 15px; flex: 1 1 300px;
 padding: 1.25em; border: 5px solid #a49b78; border-radius: 20px; background-color: #CBC096;}

.accomodation img { width: 100%; max-width: 120px; height: auto; border-radius: 20px;}
 
@media only all and (max-width: 480px) {
  .col img {
    height: 20%;
     width: 60%;
  }
   .mask {width: 65%; 
         height: 70%;
           top: 64px;
           left: 57px;}
.mask img  {
  width: 100%;
  height: 100%;
 
 
}
}