.banner {
    background-image: url("../../media/images/banner-news.webp");
    width: 100%;
    height: 35vh;
    background-size: cover;
    background-position: center;
}

.banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.banner-title {
    width: 100%;
    height: 30%;
    justify-content: center;
    display: flex;
    align-items: center;
}

.banner-title h1 {
    font-size: var(--fontsize3);
    color: var(--white);
    text-shadow: var(--shadowText);
}
.banner-title h1::first-letter{
    text-transform: uppercase;
}
.banner-content .banner-content {
    height: 30%;
    display: flex;
    width: 80%;
    justify-content: space-evenly;
    flex-wrap: wrap;
    flex-direction: row;
}
.content {
    width: 90%;
    display: flex;
    margin-top: 5vh;
    justify-content: space-between;
}
.content .column1 {
    width: 75%;
}
.column1 .row{
    width: 100%;
    padding: 2vh 0vh;
}
.grid-content{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.grid-content >*{
    flex: 0 1 350px;
}
.grid-content .grid-box{
    width: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5vh;
}
.grid-content .grid-box .card{
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
}
.card .card-content{
    width: 95%;
    padding: 2.5% 0%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.card-content .card-img{
    width: 100%;
    overflow: hidden;
    height: 300px;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
}
.card-img img{
    width: auto;
    height: 100%;
    transition: all 0.5s ease;
}
.card-content .card-title{
    padding: 5% 0%;
    text-align: center;
    width: 90%;
}
#title{
    font-size: 20px;
    color: gray;
    font-family: courier,courier new,serif;
}
.card-content .card-more{
    margin: 5% 0%;
    text-align: center;
    width: 90%;
} 
.card-content .card-more a{
    background: #cbd9d1;
    padding: 14px;
    text-decoration: none;
    text-transform: uppercase;
    color: black;
    transition: all 0.5s ease;

}
.card-content .card-more a:hover{
    background: var(--lightgray);
    color: var(--black);
}

.grid-content .grid-box .card:hover img{
    transform: scale(1.05);
}

    .column1 .row .pagination{
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center
    }
    .pagination{
        list-style: none;
        display: inline-flex;
    }

    .pagination li{
        padding: 10px;
    }


@media only screen and (max-width: 970px) {
    .content .column1 {
        width: 90%;
    }
}
@media only screen and (max-width: 470px) { 
    .card-content .card-img {
        width: 65%;
        height: 200px;
    }
    .card-content .card-title{
        width: 60%;
    }
    .card-content .card-more a{
        padding: 6px;
        font-size: 14px;
    }
}