.blogpage-header{
    margin-top: 100px;
}

.blogpage-header-container{
    max-width: 400px;
    text-align: center;
    margin: auto;
    color: black;
}

.blogpage-header-container-2{
    max-width: 450px;
    text-align: center;
    margin: auto;
    color: black;
}

.blogpage-header-h1{
    font-size: 40px;
}

.blogpage-header-span-2{
    font-style: italic;
    text-transform: uppercase;
    font-weight: 100;
}

.blogpage-header-p{
    margin-top: -20px;
}

.blogpage-sec-1{
    margin-top: 25px;
    margin-bottom: 50px;
}

.blogpage-sec-1-container{
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 25px;
    row-gap: 25px;
    text-align: center;
}

.blogpage-gridelement{
    padding: 25px;
    padding-bottom: 5px;
    min-height: 420px;
    background-color: rgb(234, 234, 234);
    border-radius: 15px;
    box-shadow: 12px 12px 180px -1px rgba(0,0,0,0.20);
    -webkit-box-shadow: 12px 12px 180px -1px rgba(0,0,0,0.20);
    -moz-box-shadow: 12px 12px 180px -1px rgba(0,0,0,0.20);
    transition: box-shadow 200ms ease-in-out;
}

:hover.blogpage-gridelement{
    box-shadow: 12px 12px 180px -1px rgba(0,0,0,0.40);
    -webkit-box-shadow: 12px 12px 180px -1px rgba(0,0,0,0.40);
    -moz-box-shadow: 12px 12px 180px -1px rgba(0,0,0,0.40);
}

.gridelement-img{
    width: 350px;
    border-radius: 15px;
}

.gridelement-h2{
    text-align: left;
    font-size: 25px;
    color: black;
}

.gridelement-h2-2{
    text-align: left;
    font-size: 22.5px;
    color: black;
    text-decoration: none;
}

.gridelement-text{
    text-align: left;
    font-size: 15px;
    color: black;
    min-height: 80px;
}

.gridelement-post-date{
    margin-top: 20px;
    text-align: left;
    color: gray;
}

.line-2{
    background-color: gray;
    height: 2px;
    max-width: 1fr;
    margin-left: auto;
    margin-right: auto;
    margin-top: -15px;
}

.gridelement-link{
    text-decoration: none;
}

@media screen and (max-width: 1200px){
    .gridelement-img {
        width: 100%; /* Adjust the image width to be responsive */
        
    }
    .blogpage-sec-1-container{
        row-gap: 10px;
        column-gap: 10px;
    }
}

@media screen and (max-width: 800px) {
    .blogpage-sec-1-container {
        grid-template-columns: repeat(2, 1fr);
        margin-left: 10px;
        margin-right: 10px;
        column-gap: 10px;
        row-gap: 10px;
    }

    .gridelement-img {
        width: 100%; /* Adjust the image width to be responsive */
    }
}

@media screen and (max-width: 500px) {
    .blogpage-sec-1-container {
        grid-template-columns: repeat(1, 1fr);
        margin-left: 10px;
        margin-right: 10px;
        column-gap: 10px;
        row-gap: 10px;
    }

    .gridelement-img {
        width: 100%; /* Adjust the image width to be responsive */
    }
}

@media screen and (max-width: 1200px){
    .footer-grid-1 {
        width: 100%; /* Adjust the image width to be responsive */
    }
}