.mega-details {
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-bottom: 50px
}

.post-featured-image {
    height: 550px;
    background-color: var(--link-color);
    background-size: cover;
    background-position: center;
}

.post-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    max-width: 90%;
    margin-top: 20px;
}

.post-title a {
    text-decoration: none;
    color: inherit
}

.read-more {
    align-self: flex-start;
    padding-bottom: 5px;
    color: var(--link-color);
    background-color: var(--body-background-color);
    border-bottom: solid 1px;
    margin: 10px 0 5px
}

.read-more:hover {
    color: var(--link-hover-color);
    background-color: inherit
}

.post-categories {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    display: flex;
    gap: 0.59rem
}

.post-categories a {
    text-decoration: none;
    background-color: var(--header-background-color);
    color: var(--menu-text-color);
    padding: 4px 10px;
    border-radius: 15px;
    display: inline-block;
}

.post-categories a:hover {
    color: var(--menu-text-hover-color);
}

.post-title {
    margin: 5px 0;
    text-transform: Uppercase;
}

.post-title:hover {
    color: var(--link-hover-color)
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.8rem;
}

.post-excerpt {
    margin-bottom: 5px;
}

.post-author {
    display: flex;
    align-items: center;
    gap: 5px
}

.author-image img {
    border-radius: 50%
}

.post-date, .post-author {
    opacity: 0.8
}

.load-more {
    margin-top: 15px;
    text-align: center;
}

#load-more-posts {
    padding: 13px 38px;
    border: none
}

.pagination {
    gap: 10px;
}

.pagination .page-numbers {
    height: 40px;
    width: 40px;
    border-radius: 2px
}

.pagination a {
    box-shadow: -1px 2px 5px #00000011;
}

.page-numbers.current {
    background-color: var(--button-background-color);
    color: var(--button-text-color);
    font-weight: 600;
    box-shadow: -1px 2px 5px #00000011;
}

a.page-numbers:hover {
    background-color: var(--button-background-hover-color);
    color: var(--button-text-hover-color)
}


@media (max-width:480px) {
    .post-featured-image {
        height: 210px;
    }
}