/* Styles for the homepage element */
main {
    padding: 0px 20px 20px 20px; /* Inner spacing */
    border: 6px solid #000; /* Added border */
    border-top: none; /* Removed top border */
    border-bottom: none; /* Removed bottom border */
    margin: 0px 10px 0px 10px; /* Outer spacing */
}

main > img {
    display: block; /* Ensure the image is a block element */
    width: calc(100% + 40px); /* Full width plus 40px */
    margin: 0 -20px; /* Negate the padding of the main element */
    border-top: 6px solid #000; /* Top border */
    border-bottom: 6px solid #000; /* Bottom border */
}

/* Visually hide elements while keeping them accessible to screen readers */
.visually-hidden {
    position: absolute; /* Position the element off-screen */
    left: -9999px; /* Hide the element visually */
}

/* Styles for the three feature boxes */
.three-boxes {
    display: flex; /* Use flexbox for layout */
    justify-content: space-around; /* Equal spacing between boxes and sides */
    margin-top: 20px; /* Add spacing above the container */
}

.box {
    display: flex; /* Enable flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: flex-start; /* Align items to the top */
    flex: 1; /* Allow boxes to grow/shrink proportionally */
    max-width: 150px; /* Set a maximum width */
    aspect-ratio: 1; /* Maintain a square shape */
    border: 6px solid #000; /* Border for each box */
    border-radius: 10px; /* Rounded corners */
    background-color: #d28c1a; /* Optional background color */
    margin: 0 10px; /* Add spacing between boxes */
    padding: 10px; /* Inner spacing */
    box-sizing: border-box; /* Include padding and border in the box's dimensions */
}

.box img {
    max-width: 75%; /* Restrict image width to 75% of the box */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure the image is a block element */
    border: none; /* Remove any border */
    margin-bottom: 10px; /* Add spacing below the image */
}

.box p {
    text-align: center; /* Center the text */
    font-size: 16px; /* Set font size */
    color: #333; /* Set text color */
    margin: 0; /* Remove default margin */
}

@media (max-width: 459px) {
    .box p {
        display: none; /* Hide the text inside the box on small screens */
    }

    .box img {
        margin-top: auto; /* Center vertically */
        margin-bottom: auto; /* Center vertically */
    }
}

.center-text {
    text-align: center; /* Center the text */
}

.posts-grid {
    border: 6px solid #000; /* Add border */
    border-radius: 10px; /* Add rounded corners */
    background-color: #e6b558; /* Background color */
    padding: 20px; /* Inner spacing */
}

.post-item {
    display: flex; /* Arrange thumbnail and content side by side */
    align-items: flex-start; /* Align items at the top */
    margin-bottom: 20px; /* Add spacing between posts */
}

.post-link {
    display: flex; /* Make the entire link clickable */
    text-decoration: none; /* Remove underline from links */
    color: inherit; /* Inherit text color */
    width: 100%; /* Ensure the link spans the full width */
}

.post-thumbnail {
    flex: unset; /* Unset width for the thumbnail */
    margin-right: 15px; /* Add spacing between thumbnail and content */
}

.post-thumbnail img {
    width: 100%; /* Ensure the image fills the thumbnail area */
    height: auto; /* Maintain aspect ratio */
    border-radius: 5px; /* Optional: Add rounded corners */
}

.post-content {
    flex: 1; /* Use the remaining width for the content */
}

.post-content h3 {
    font-size: 18px; /* Adjust title size */
    margin: 0 0 10px 0; /* Add spacing below the title */
}

.post-content h4 {
    font-size: 14px; /* Adjust excerpt size */
    margin: 0; /* Remove default margin */
    color: #666; /* Optional: Change text color for the excerpt */
    line-clamp: 400; /* Limit to 400 characters */
}

@media (max-width: 430px) {
    .post-content h4 {
        display: -webkit-box; /* Enable truncation */
        line-clamp: 200; /* Limit to 200 characters */
        -webkit-box-orient: vertical; /* Set box orientation to vertical */
        overflow: hidden; /* Hide overflowing text */
        text-overflow: ellipsis; /* Add ellipsis for truncated text */
    }
}