/* Container for the news list */
.newslist {
    display: grid;
    grid-template-columns: auto 1fr; /* Image in the first column, text in the second column */
    gap: 20px; /* Space between the image and text */
    background-color: #f0f0f0; /* Light grey background */
    padding: 15px;
    border-radius: 8px; /* Optional: rounded corners */
    margin: 20px 0; /* Margin around the container */
    align-items: start; /* Align all grid items at the top */
    font-family: 'Playfair Display', Georgia, serif; /* Font style for the news list */
}

/* Styling for the image */
.newslist-image {
    width: 250px;
  height: auto;
  object-fit: cover; 
}

/* Styling for the text container */
.newslist-text {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    justify-content: flex-start; /* Align children to the top of the container */
    text-align: left; /* Left-align all text */
}

/* Styling for the heading */
.newslist-text h3 {
    font-size: 1.5em; /* Larger font size for the heading */
    margin: 0; /* Remove default margins */
    font-weight: bold; /* Make heading bold */
}

/* Styling for paragraphs within the text container */
.newslist-text p {
    font-size: 1em; /* Standard font size for the text lines */
    margin: 0; /* Remove default margins */
    line-height: 1.2; /* Adjust line height for minimal vertical space */
}

/* Styling for links within the text container */
.newslist-text a {
    color: black !important;          /* Link text color */
    font-weight: bold !important;     /* Make link text bold */
    text-decoration: none !important;  /* No underline */
    transition: none !important;      /* No animation */
}

/* More specific link styling to ensure no underline */
.newslist-text a:hover,
.newslist-text a:focus,
.newslist-text a:active {
    text-decoration: none !important; /* Ensure no underline on hover, focus, or active states */
}

/* Responsive behavior */
@media (max-width: 550px) {
    .newslist {
        grid-template-columns: 1fr; /* Stack image and text vertically on smaller screens */
        grid-template-areas:
            "image"
            "text"; /* Define grid areas for stacking */
    }

    .newslist-image {
        width: 100%; /* Image takes full width on small screens */
    }
}