How to change room gallery

The room gallery is located in app >  rooms.html

<ul id="easyPaginate" class="rooms hg-catalog-4-column">

This is the code that starts the room gallery.

The id "#easyPaginate" triggers the script to paginate the images. The script is located at the bottom of the rooms.html page

<script type="text/javascript">
 $(function() {
 $('#easyPaginate').easyPaginate({
 paginateElement: 'li',
 elementsPerPage: 8,
 effect: 'default',
 firstButton: 'false',
 firstButtonText: '',
 lastButton: 'false',
 lastButtonText: '',
 prevButtonText: 'PREVIOUS',
 nextButtonText: 'NEXT',
 });
});
 </script>

Here you can modify the text for buttons and elements for the page.

The style of the page is found in app/style/scss/_grid-catalogue.scss

The class hg-catalog-4-column is added so that on the desktop and laptop the layout would be 4 columns.

.rooms.hg-catalog-4-column {
 .rooms__item {
   width:25%;
   margin:0 auto;
   margin-bottom: 50px;
   @include max_mobile {
    width: 100%;
   }
   @include mobile_tablet {
    width: 50%;
   }
 }
}

If you would like an other number of columns then add additional classes width different percentage for .room__item width.