test 3-4 7
<style>
.spread {
display: flex;
width: 840px;
height: 595px;
margin: 40px auto;
background-color: white;
border: 1px solid #ccc;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 1;
flex-wrap: wrap;
}
.page {
width: 50%;
height: 100%;
position: relative;
overflow: hidden;
box-sizing: border-box;
border-right: 1px solid #eee;
}
.page:last-child {
border-right: none;
}
.photo-square,
.photo-rect,
.photo-tall {
overflow: hidden;
position: absolute;
left: 0;
}
.photo-square {
width: 297.5px;
aspect-ratio: 1 / 1;
top: 360px;
}
.photo-rect {
width: 297.5px;
aspect-ratio: 16 / 9;
top: 180px;
}
.photo-tall {
top: 0;
width: 297.5px;
height: calc(297.5px + 297.5px + 20px); /* top + square + margin */
top: auto;
bottom: 0;
z-index: 0;
}
.photo-square img,
.photo-rect img,
.photo-wide img,
.photo-tall img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.photo-wide {
position: absolute;
left: 297.5px;
top: 0;
width: 562.5px;
height: 595px;
overflow: hidden;
z-index: 0;
}
.text-box {
position: absolute;
top: 20px;
left: 10%;
width: 80%;
background: rgba(255, 255, 255, 0.9);
padding: 16px;
box-shadow: 0 0 6px rgba(0,0,0,0.1);
font-size: 13px;
line-height: 1.4;
z-index: 2;
}
.text-box h3 {
font-size: 16px;
margin: 0 0 8px;
}
.text-box p {
margin: 0 0 6px;
}
@media (max-width: 767px) {
.spread {
flex-direction: column;
width: 100%;
height: auto;
border: none;
}
.page {
width: 100%;
height: auto;
border: none;
border-bottom: 1px solid #ddd;
padding-bottom: 40px;
}
.photo-square,
.photo-rect,
.photo-tall {
position: relative;
margin: 20px auto 10px;
top: auto !important;
}
.photo-wide {
position: relative;
width: 100%;
left: 0;
height: auto;
aspect-ratio: 16 / 9;
}
.text-box {
position: relative;
top: 0;
left: 0;
width: 90%;
margin: 20px auto;
}
}
</style>
<div class="spread">
<!-- Page 3 -->
<div class="page page-left">
<a href="/files/attach/images/2025/04/30/9eacc12e05e7a13cae22c45d941614d2.jpg" data-lightbox="album" data-title="Top Left (16:9)">
<div class="photo-rect">
<img src="/files/attach/images/2025/04/30/9eacc12e05e7a13cae22c45d941614d2.jpg" alt="Top Left Rect">
</div>
</a>
<a href="/files/attach/images/2025/04/30/aed9d0c3fbcc3bd8a5a1e2070ce3fcaf.jpg" data-lightbox="album" data-title="Bottom Left">
<div class="photo-square bottom">
<img src="/files/attach/images/2025/04/30/aed9d0c3fbcc3bd8a5a1e2070ce3fcaf.jpg" alt="Bottom Left">
</div>
</a>
<a href="/files/attach/images/2025/04/30/07d53c7f66823a13c8c27ecc3816d0b6.jpg" data-lightbox="album" data-title="Tall Overlay">
<div class="photo-tall">
<img src="/files/attach/images/2025/04/30/07d53c7f66823a13c8c27ecc3816d0b6.jpg" alt="Tall Overlay">
</div>
</a>
</div>
<!-- Page 4 -->
<div class="page page-right">
<div class="text-box">
<h3>Desert Echoes</h3>
<p>사막의 아침 공기가 아직 따스함을 품기 전</p>
<p>고요한 장면을 담은 한 컷</p>
<p>#빛 #바람 #침묵</p>
</div>
<a href="/files/attach/images/2025/04/30/71b37f3dfe6d58dd3a3f92c7b0f5f778.jpg" data-lightbox="album" data-title="Right Full">
<div class="photo-wide">
<img src="/files/attach/images/2025/04/30/71b37f3dfe6d58dd3a3f92c7b0f5f778.jpg" alt="Wide Right">
</div>
</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/lightbox2@2.11.4/dist/js/lightbox.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/lightbox2@2.11.4/dist/css/lightbox.min.css" rel="stylesheet" />
by eGrida posted May 11, 2025
