/**
 * Grid container
 */
#tiles {
list-style-type: none;
position: relative; /** Needed to ensure items are laid out relative to this container **/
margin: 0;
}

/**
 * Grid items
 */
#tiles li {
width: 200px;
background-color: #ffffff;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
display: none; /** Hide items initially to avoid a flicker effect **/
  cursor: pointer;
padding: 4px;
}

#tiles li img {
display: block;
}

/**
 * Grid item text
 */
#tiles li p {
color: #666;
font-size: 12px;
margin: 7px 0 0 7px;
}

/**
 * Some extra styles to randomize heights of grid items.
 */
#tiles ali:nth-child(3n) {
height: 175px;
}

#tiles ali:nth-child(4n-3) {
padding-bottom: 30px;
}

#tiles ali:nth-child(5n) {
height: 250px;
}

/** General page styling **/
  
html {
background-color: #ffffff;
}

#main {
padding: 30px 0 30px 0;
}

header h1 {
	text-align: center;
	font-size: 42px;
	font-weight: normal;
	margin: 30px 0 3px 0;
}

header p {
text-align: center;
font-size: 13px;
color: #777;
margin: 0;
}

/* Layout Container */
#content-area {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

/* Individual Postcard Rows */
.postcard-entry {
    display: flex;
    flex-direction: column; /* Stacks on Mobile */
    gap: 40px;
    margin-bottom: 60px;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 40px;
}

/* Responsive Image handling */
.postcard-image {
    width: 100%;
    max-width: 450px;
}

.postcard-image img {
    width: 100%;
    height: auto;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1); /* Postcard shadow effect */
    border: 8px solid #fff; /* White border to mimic postcard edges */
}

.postcard-text {
	font-family: 'Oswald', sans-serif;
    width: 100%;
    text-align: left;
}

.about-text {
	font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    text-align: left;
}

.postcard-text h3 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    color: #333;
}

/* Desktop Logic (Screens wider than 768px) */
@media (min-width: 768px) {
    .postcard-entry {
        flex-direction: row; /* Side-by-side on Desktop */
    }

    .postcard-entry.reverse {
        flex-direction: row-reverse; /* Image on right */
    }

    .postcard-image, .postcard-text {
        flex: 1; /* Equal 50/50 split */
    }
}