/* css for blog pages */


.blog-main-container {
    grid-area: content;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: ". article article .";
}

.article {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
     "image title title title"
     "image meta meta meta"
     "image desc desc desc"
     "image read read read";
    background: var(--primaryColorLighter);
    border-radius: 20px 20px 20px 20px;
    margin-bottom: 20px;
    margin-top: 15px;
}

.article-container {
    grid-area: article;
}

.article-title h1 {
    margin: 10px 0 10px 1.5rem;
    font-size: 30px;
    grid-area: title;
}

.article-metadata {
    font-style: italic;
    font-size: 13px; 
    margin-left: 1.5rem;
    grid-area: meta;
}

.article-description {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 1.5rem;
    font-size: 17px;
    grid-area: desc;
}

.large {
    grid-area: read;
    font-size: 15.5px;
}

.article-image-container {
    padding-right: 5px;
    grid-area: image;
    border-right: 1px dotted var(--secondaryColor);
}

.blog-image {
    width: 100%;
    height: 100%;
    border-radius: 20px 0 0 20px;
}

.blog-main-content {
    grid-area: content;
    display: grid;
    grid-template-rows: auto;
    
    grid-template-columns: repeat(10, 1fr);
    grid-template-areas:
    "pt pt pt pt pt pt pt pt pt pt"
    ". pi pi pi pi pi pi pi pi ."
    ". pa pa pa pa pa pa pa pa ."
}

.blog-title-header {
    grid-area: pt;
    text-align: center;
    background-color: var(--secondaryColor);
    color: var(--primaryColor);
    font-weight: 700;
}

.blog-image-container {
    margin-top: 20px;
    grid-area: pi;
    height: 300px;
}

.blog-image-container img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.full-screen {
    border-radius: 4px 4px 4px 4px;
    overflow: hidden;
    border: 2px solid var(--secondaryColor);
    box-shadow: 0px 0px 1em 0em #000;
  }

.blog-post-text {
    grid-area: pa;
    margin-top: 15px;
}