.related-collections {
    background-color: #d1c7bd;
}

/* Base styles for related posts section */
.related-collection-heading {
    font-size: 2rem;
    margin: 5rem 0 5rem 45px;
}

.related-collection-title a {
    color: #72383d;
}

.related-collection-heading-des {
    font-size: 1rem;
    margin-left: 45px;
}

.related-posts {
    margin-top: 70px;
    width: 100%; /* Adjust to full width for responsiveness */
    padding-top: 80px;
    box-sizing: border-box; /* Ensure padding is included in width */
}

.related-collection-title {
    font-size: 1.5rem; /* Adjusted font size */
}

.related-posts h2 {
    font-size: 1.5rem; /* Adjusted font size */
    margin-bottom: 15px;
}

.related-posts ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap onto the next line */
    gap: 15px; /* Adds space between items */
}

.related-posts li {
    flex: 1 1 calc(33.333% - 15px); /* Three items per row */
    box-sizing: border-box;
    margin-bottom: 15px;
}

.related-post-thumbnail {
    width: 100%;
    height: 0;
    padding-bottom: 75%; /* Maintain a 3:4 aspect ratio (height/width) */
    position: relative; /* Establish a containing block for absolute positioning */
    overflow: hidden; /* Ensures that any overflow content is hidden */
}

.related-post-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Adjusted width to 100% */
    height: 100%; /* Adjusted height to 100% */
    object-fit: cover; /* Ensures the image covers the container */
    border-radius: 0.25rem;
}

/* Media query for tablets and smaller screens */
@media (max-width: 1024px) {
    .related-collection-heading {
        font-size: 1.5rem; /* Adjusted font size */
        margin-left: 15px; /* Adjust margin */
    }

    .related-collection-heading-des {
        font-size: 0.9rem; /* Adjusted font size */
        margin-left: 15px; /* Adjust margin */
    }

    .related-posts {
        padding-left: 15px; /* Adjust padding */
        padding-right: 15px; /* Adjust padding */
    }

    .related-posts h2 {
        font-size: 1.2rem; /* Adjusted font size */
    }

    .related-collection-title {
        font-size: 1.2rem; /* Adjusted font size */
    }

    .related-posts li {
        flex: 1 1 calc(50% - 15px); /* Two items per row on tablets */
    }
}

/* Media query for small screens */
@media (max-width: 768px) {
    .related-posts ul {
        flex-direction: column; /* Stack items vertically */
        padding: 0; /* Ensure padding does not cause horizontal overflow */
    }

    .related-posts li {
        flex: 1 1 100%; /* Full width for each item */
        margin-bottom: 15px; /* Maintain spacing between items */
    }

    .related-posts h2 {
        font-size: 1rem; /* Adjusted font size */
    }

    .related-collection-title {
        font-size: 1rem; /* Adjusted font size */
    }

    .related-collection-heading,
    .related-collection-heading-des {
        font-size: 1rem; /* Adjusted font size */
        margin-left: 0; /* Remove margin */
    }
}

/* Media query for very small screens */
@media (max-width: 480px) {
    .related-collection-heading {
        font-size: 2rem; /* Further reduced font size */
        margin-left: 0; /* Remove margin */
    }

    .related-collection-heading-des {
        font-size: 1rem; /* Further reduced font size */
        margin-left: 0; /* Remove margin */
    }

    .related-posts h2 {
        font-size: 0.8rem; /* Further reduced font size */
    }

    .related-collection-title {
        font-size: 1.5rem; /* Further reduced font size */
    }

    #related-collections-ul {
        margin:0rem;
    }
}

/* GSAP Slider Buttons (Optional adjustments) */
.prev, .next {
    position: absolute;
    top: -1%;
    transform: translateY(-50%);
    background: none;
    color: #000;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    z-index: 20;
    font-size: 1.2rem;
    box-shadow: none;
}

.prev:hover, .next:hover {
    color: #000; /* Change to desired hover text color */
    background: none;
    font-style: italic;
}