/* Base styles for desktop */
.content {
    display: flex;
    width: 100%;
}

.main-content, .sidebar {
    padding: 20px;
}

.main-content {
    flex: 0 0 70%; /* 70% width but doesn't grow or shrink */
}

.sidebar {
    flex: 0 0 30%; /* 30% width but doesn't grow or shrink */
}

.postcard img, .square-block img, .sidebar img {
    width: 100%; /* Responsive image size */
    height: auto;
}

/* Responsive adjustments for mobile and smaller screens */
@media (max-width: 768px) {
    .content {
        flex-direction: column;
    }

    .main-content, .sidebar {
        flex: 0 0 100%; /* Takes full width on small screens */
    }

    .postcard, .square-block {
        margin-bottom: 20px; /* Adds space between blocks */
    }
}