.post-grid {
    display: grid;
    gap: 30px;
    grid-template-areas: "header header" "body ." "comments comments" "pages pages";
    grid-template-columns: max-content 1fr;
    box-sizing: border-box;
}

.post-header {
    grid-area: header;
    width: 100%;
    aspect-ratio: 2;
    display: grid;
    border-radius: var(--round1);
    grid-template-areas: "yes";
    box-sizing: border-box;
}
/*
.post-cover {
    grid-area: yes;
    z-index: -5;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: var(--round1);
    box-sizing: border-box;
}
*/
.post-head {
    grid-area: yes;
    display: grid;
    position: relative;
    grid-template-areas: "buttons buttons buttons" "pfp autor autor" "tags tags date" "title title title";
    grid-template-rows: auto 50px min-content min-content;
    grid-template-columns: 50px auto auto;
    place-items: center;
    box-sizing: border-box;
    padding: 30px;
    border-radius: var(--round1);
    gap: 20px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}
.post-head::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(transparent 0%, color-mix(in lab, var(--background), transparent 10%) 80%, color-mix(in lab, var(--background), transparent 2%));
    pointer-events: none;
}
.post-head > * {
    z-index: 1;
}

.post-head p {
    margin: 0;
    width: 100%;
}

.post-buttons {
    grid-area: buttons;
    display: grid;
    gap: 10px;
    grid-template-areas: "back . edit" ". . .";
    grid-template-columns: min-content auto min-content;
    grid-template-rows: min-content auto;
    height: min-content;
    width: 100%;
    height: 100%;
}

.post-buttons a {
    padding: 4px 10px;
    width: min-content;
    position: relative;
    right: 0;
    border: none;
    border-radius: var(--round1);
}

.post-buttons #back {
    grid-area: back;
    background-color: var(--primary);
}
.post-buttons #edit {
    grid-area: edit;
    background-color: var(--primary);
}

.post-title {
    grid-area: title;
    font-weight: 600;
    font-size: xx-large;
}

.post-tags {
    grid-area: tags;
}

.post-date {
    grid-area: date;
    text-align: right;
}

.post-autor {
    grid-area: autor;
}

.post-autor-pic {
    grid-area: pfp;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    aspect-ratio: 1 !important;
    border-radius: 500px;
}

.post-body {
    grid-area: body;
    text-align: justify;
    color: var(--text   );
    white-space-collapse: preserve;
    max-width: 645px;
}
/*
.post-img {
    grid-area: img;
    display: grid;
    gap: 20px;
}

.post-img img {
    width: 100%;
    height: 100%;
    border-radius: 50px;
    height: min-content;
}
*/
.post-comments {
    grid-area: comments;
}