.main-content {
    max-width: 120rem !important;
}
.blog-grid {
    display: grid;
    gap: 60px 30px;
    width: 100%;
}
.firstpg {
    grid-template-areas: "a1 a1 a1 a2 a2 a2" " a3 a3 a4 a4 a5 a5" "a6 a6 a7 a7 a8 a8" "a9 a9 a10 a10 a11 a11";
    grid-template-rows: auto auto auto auto;
    /*grid-template-rows: 540px 360px 360px 360px;*/
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.otherpg {
    grid-template-areas: "a1 a2 a3" "a4 a5 a6" "a7 a8 a9" "a10 a11 a12";
    grid-template-rows: auto auto auto auto;
    /*grid-template-rows: 360px 360px 360px 360px;*/
    grid-template-columns: 1fr 1fr 1fr;
}

.article {
    display: grid;
    grid-template-areas: "img" "." "ainfo" "title" "snippet";
    grid-template-rows: auto 12px min-content min-content 1fr;
    grid-template-columns: 1fr;
    cursor: pointer;
    border-radius: var(--round1);
}
.article::after {
    content: '';
    grid-area: ainfo / snippet / snippet;
    width: 4px;
    background-color: var(--primary);
    margin-left: 0;
    border-radius: var(--round2);
    /*border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;*/
    transition: background-color 0.2s ease-out;
}
.article:hover::after {
    background-color: var(--accent);
}

.aImg {
    grid-area: img;
    position: relative;
    width: 100%;
    aspect-ratio: 2;
    border-radius: var(--round1);
    background-size: cover;
    background-position: center;
}
.aInfo {
    grid-area: ainfo;
    height: min-content;
    margin: 0;
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 12px;
    margin-top: 12px;
    font-size: small;
    opacity: 70%;
}
/*.aImg img {
    width: 100%;
    aspect-ratio: 1.77;
    object-fit: cover;
    object-position: 50% 50%;
}*/
.aTitle {
    grid-area: title;
    height: min-content;
    font-weight: 600;
    font-size: x-large;
    margin: 0;
    padding-left: 12px;
    padding-right: 12px;
    top: 50%;
    transform: translate(0, -50%);
    position: relative;
    color: var(--accent);
    text-decoration: underline transparent;
    transition: text-decoration 0.2s ease-out;
}
.article:hover .aTitle {
    text-decoration: underline;
}
.aSnippet {
    grid-area: snippet;
    height: min-content;
    margin: 0;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: justify;
}
/*.aTags {
    grid-area: tags;
    height: min-content;
    margin: 0;
    padding-left: 20px;
    height: 40px;
    overflow: hidden;
    margin-bottom: 20px;
}
.aDate {
    grid-area: date;
    height: min-content;
    margin: 0;
    padding-right: 20px;
    text-align: right;
    margin-bottom: 20px;
}
/*.aAutorImg {
    grid-area: apic;
    height: min-content;
    aspect-ratio: 1;
    height: 70%;
    top: 50%;
    transform: translate(0, -50%);
    position: relative;
    border-radius: 200px;
    margin-right: 20px;
}
.aAutor {
    grid-area: autor;
    height: min-content;
    margin: 0;
    text-align: right;
    padding-right: 12px;
    top: 50%;
    transform: translate(0, -50%);
    position: relative;
}*/

.article.a1 {grid-area: a1;}
.article.a2 {grid-area: a2;}
.article.a3 {grid-area: a3;}
.article.a4 {grid-area: a4;}
.article.a5 {grid-area: a5;}
.article.a6 {grid-area: a6;}
.article.a7 {grid-area: a7;}
.article.a8 {grid-area: a8;}
.article.a9 {grid-area: a9;}
.article.a10 {grid-area: a10;}
.article.a11 {grid-area: a11;}

.main-content a        {color: inherit !important;text-decoration: none !important;transition: none !important;}
.main-content a:hover  {text-shadow: none !important;}
.main-content a:active {color: inherit !important;text-decoration: none !important;text-shadow: none !important;}

@media only screen and (max-width: 768px) {
    .blog-grid, .firstpg, .otherpg {
        grid-template-areas: "a1" "a2" "a3" "a4" "a5" "a6" "a7" "a8" "a9" "a10" "a11" "a12";
        grid-template-rows: repeat(12, auto);
        grid-template-columns: 1fr;
    }
}