from raw to refined

The Lantern

Grand in scale, deliberate in every detail. Soaring glass, vaulted ceilings, and a great room that commands the space — this is the kind of project where the architecture sets an unforgiving standard and the finishing either rises to meet it or it doesn’t. Barragan Drywall rose to meet it.

Builder

RJ Dailey Construction

Designer

Taylor Lombardo Architecture

.smart-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.smart-gallery .bricks-layout-item {
  grid-column: span 1;
}

.smart-gallery .bricks-layout-item.is-landscape,
.smart-gallery .bricks-layout-item.force-wide {
  grid-column: span 2;
}

.smart-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.smart-gallery .bricks-layout-item.is-landscape img {
  aspect-ratio: 5 / 3;
}

document.addEventListener('DOMContentLoaded', () => {
  const galleries = document.querySelectorAll('.smart-gallery');

  galleries.forEach(gallery => {
    const items = Array.from(gallery.querySelectorAll('.bricks-layout-item'));

    const imagePromises = items.map(item => {
      const img = item.querySelector('img');

      if (!img) return Promise.resolve();

      const classifyImage = () => {
        const width = img.naturalWidth;
        const height = img.naturalHeight;

        item.classList.remove('is-landscape', 'is-square-portrait', 'force-wide');

        if (width > height) {
          item.classList.add('is-landscape');
        } else {
          item.classList.add('is-square-portrait');
        }
      };

      if (img.complete) {
        classifyImage();
        return Promise.resolve();
      }

      return new Promise(resolve => {
        img.addEventListener('load', () => {
          classifyImage();
          resolve();
        });
      });
    });

    Promise.all(imagePromises).then(() => {
      let portraitGroup = [];

      const processPortraitGroup = () => {
        if (portraitGroup.length % 2 !== 0) {
          portraitGroup[portraitGroup.length - 1].classList.add('force-wide');
        }

        portraitGroup = [];
      };

      items.forEach(item => {
        if (item.classList.contains('is-square-portrait')) {
          portraitGroup.push(item);
        } else {
          processPortraitGroup();
        }
      });

      processPortraitGroup();
    });
  });
});