.trip {
display: flex;
flex-direction:row;
gap: 20px;
align-items: center;
}

.arrow {
text-decoration: none;
color: #837165;
font-size: 2rem;
transition: all 0.3s ease;
}

.arrow:hover {
color:#FFD700;
transform: scale(1.05);
}

.container {
display: grid;
grid-template-columns: 1fr minmax(260px, 340px);
gap: 20px;
align-items: start;
}

.left-column {
min-width: 0;
}

.thumbnails {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 15px; 
padding-left: 20px;
}

.thumb {
width:auto;
height: 89px;
object-fit: contain;
box-sizing: border-box;
cursor: pointer;
border: 5px solid #fff; 
transition: all 0.3s ease;
box-shadow: 1px 1px 2px #888;
}

.thumb.active {
border-color: #FFD700;
transform: scale(1.05);
}
.sold{
display: flex;
width: 200px;
height: 60px;
border-radius: 5px;
background-color: #FFD700;
color: #fff;
text-align: center !important;
padding: 30px 50px;
font-size: 1.2rem;
font-weight:900;
margin-bottom: 15px; 
letter-spacing: 0.2em;
box-shadow: 1px 1px 2px #888;
align-items: center;
justify-content: center;
}

.main-viewport {
width: 100%;
max-height: 90vh;
border: 34px solid #fff; 
box-sizing: border-box;
box-shadow: 2px 2px 3px #888;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

#main-img {
display: block;
max-width: 100%;
max-height: calc(90vh - 68px);
width: auto;
height: auto;
transition: opacity 0.4s ease;
}

.fade-out { opacity: 0; }

.info-panel {
width: 100%;
padding: 20px;
min-height:auto; 
text-align:left;
margin-top:89px;
}

.tit4d {
display:flex;
flex-grow:1;
text-transform:uppercase;
letter-spacing: 0.01em;
font-weight:800;
color: var(--col2);
padding-top:34px;
padding-bottom:13px;
}

@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
.main-viewport {
max-height: 70vh;
border-width: 20px;
}
#main-img {
max-height: calc(70vh - 40px);
}
.info-panel {
margin-top:3px;
}
}