48 lines
672 B
CSS
48 lines
672 B
CSS
/* Mobile-first approach */
|
|
.map-container {
|
|
height: 100vh;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Tablet and larger */
|
|
@media (min-width: 768px) {
|
|
.sidebar {
|
|
width: 350px;
|
|
}
|
|
}
|
|
|
|
/* Journey timeline styles */
|
|
.journey-timeline {
|
|
padding: 20px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.timeline-event {
|
|
border-left: 3px solid #3498db;
|
|
padding: 15px 20px;
|
|
margin: 20px 0;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.timeline-event .date {
|
|
color: #7f8c8d;
|
|
font-style: italic;
|
|
}
|
|
|
|
.timeline-event .location {
|
|
font-size: 0.9em;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.images-container {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.images-container img {
|
|
max-width: 100px;
|
|
height: auto;
|
|
}
|