@media only screen and (min-width: 51rem) {
    /*adjusting header body and footer to big-size screen*/
    header, main {
        max-width: 720px;
        margin: 0 auto;
    }
    header {
        grid-template-columns: 1fr 1.8fr 0.5fr;
        text-align: start;
        border: none;
    }

    header span {
        font-size: 44px;
    }

    nav a {
        padding: 10px;
    }

    main .call-action {
        border-radius: 10px;
        padding: 10px;
        margin: 10px;
    }
    /* Adjusting cards section in Posts page*/
    main section .cards section{
        background-color: var(--background-color);
        border-radius: 10px;
        max-width: 720px;
        max-height: 650px;
    }
    
    main section .cards h2 {
        color: var(--text-color);
        font-family: var(--title-text);
        padding: 10px;
        font-size: 33px;
    }
    
    main section .cards p {
        color: var(--text-color);
        font-family: var(--small-text);
        font-size: 22px;
    }
    
    main section .cards img {
        width: 300px;
    }
}