* {
    box-sizing: border-box; /* Ensure padding and border are included in total width and height */
}

body {
    font-family: Arial, sans-serif; /* Set a default font */
    margin: 0; /* Remove default margin */
    padding: 20px; /* Add padding to the body */
    background-color: #f4f4f4; /* Light background color */
}

.container {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center the items */
    gap: 20px; /* Add space between the cards */
}

.card {
    background-color: #fff; /* White background for cards */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    width: 100%; /* Take full width of the container */
    max-width: 400px; /* Set a max-width for larger screens */
    overflow: hidden; /* Prevent overflow from child elements */
}

.cardh {
    background-color: #000; /* White background for cards */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    width: 100%; /* Take full width of the container */
    max-width: 400px; /* Set a max-width for larger screens */
    overflow: hidden; /* Prevent overflow from child elements */
}

.card img {
    width: 100%; /* Scale image to 100% of the card width */
    height: auto; /* Keep aspect ratio */
}

.info {
    padding: 15px; /* Padding inside the info section */
}

.title {
    margin: 10px 0; /* Add margin around title */
    font-size: 1.5em; /* Title font size */
}

.category, .date {
    margin: 5px 0; /* Add margin around texts */
    font-size: 1em; /* Font size for info text */
    color: #666; /* Grey color for category and date */
}