.main h1,
.main .h1 {
    font-size:4em;
    font-weight:300;
    margin-bottom:1em;
    color:#fff9b8; /* pale yellow */
    margin-top:5%;
}

.news-item-list {
    display:grid;
    gap:1rem;
    margin-bottom:3rem;
}

.list-item {
    display:grid;
    grid-template-columns: 1fr;
    border:1px solid var(--pyellow);
    text-align: center;
    text-decoration: none;

    &:has(.image){
        grid-template-columns: 1fr 3fr;
        text-align: left;

        & img {
            width:100%;
            height:100%;
            aspect-ratio: 1;
            object-fit:cover;
        }

        & .h1 {
            text-align: left;
        }
    }

    & .text {
        display:grid;
        align-items:center;
        align-content:center;
        padding:clamp(1.5rem,5vw,3rem);
        background-color:var(--dgreen);
        transition:background-color 0.5s;
        text-align: left;

        & h2 {
            font-size:2rem;
            line-height:1.1;
            margin-top:0;
            margin-bottom:0.5lh;
            letter-spacing: -0.05em;
            color:var(--green);
        }

        & p {
            font-size:1rem;
        }

        .readmore {
            display:inline-block;
            width:fit-content;
            padding:0.5rem 1rem;
            border-radius:5px;
            background-image:-webkit-linear-gradient( 90deg, rgb(149,201,6) 0%, rgb(237,255,115) 100%);
            color:var(--dgreen);
        }
    }

    &:hover {
        & .text {
            background-color:hsl(from var(--dgreen) h s 20%);
        }
    }
}

.pager-nav ul {
    list-style: none;
    display:flex;
    flex-wrap: wrap;
    gap:0.5rem;
    justify-content: center;
    padding-block:3rem;

    & li {
        margin:0;
        padding:0;

        & a {
            border:1px solid var(--pyellow);
            border-radius:5px;
            background-color:var(--dgreen);
            padding:0.5rem 0.75rem;
            text-decoration: none;
            color:var(--pyellow);

            &:hover {
                background-color:var(--green);
                color:var(--dgreen);
            }
        }

        &.active {
            & a {
                background-color:var(--green);
                color:var(--dgreen);
            }
        }
    }
}

p.date {
    width:100%;
    text-align: left;
    margin:0;
}

.head {
    display:grid;
    grid-template-columns: 1fr;
    background-color:var(--dgreen);
    border:1px solid var(--pyellow);
    text-align: center;
    text-decoration: none;
    margin-bottom:3rem;

    &:has(.image){
        grid-template-columns: 1fr 1fr;
        text-align: left;

        & img {
            width:100%;
            height:100%;
            aspect-ratio: 1;
            object-fit:cover;
        }

        & h1,
        & .h1 {
            text-align: left;
            margin-top:0;
            color:var(--green);
        }
    }

    & .text {
        display:grid;
        align-items:center;
        align-content:center;
        padding:3rem;

        & h1,
        & .h1 {
            font-size:2rem;
            line-height:1.1;
            margin-bottom:0.5lh;
            margin-top:0;
            letter-spacing: -0.05em;
            text-align: left;
            color:var(--green);
        }

        & p {
            font-size:1rem;
        }
    }
}

article {
    & p {
        max-width:70ch;
        margin-inline: auto;
    }
}

.others {
    margin-block:3rem;

    & h3 {
        font-size:2rem;
        margin-bottom:3rem;
    }

    & .other-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap:1rem;
    
        & .other {
            width:250px;
            border:1px solid var(--pyellow);
            text-decoration: none;
            background-color:var(--dgreen);
            transition:background-color 0.5s;
            text-align: left;
    
            & img {
                width:100%;
                aspect-ratio:1;
                object-fit:cover;
            }
    
            & .text {
                padding:1rem;
                

                & h3 {
                    font-size:1.3rem;
                    line-height:1.1;
                    margin:0;
                }

                & p {
                    font-size:0.8rem;
                }
            }

            &:hover {
                background-color:hsl(from var(--dgreen) h s 20%);
            }
        }
    }
}

@media screen and (max-width:1250px){

}

@media screen and (max-width:1100px){
    .list-item:has(.image) {
        grid-template-columns: 1fr 1.5fr;
    }
}

@media screen and (max-width:900px) {
    .list-item:has(.image) {
        grid-template-columns: 1fr;
    }

}

@media screen and (max-width:700px){
    .list-item,
    .head {

        text-align: center;
        
        &:has(.image) {
            grid-template-columns: 1fr;
        }

        & .text {
            padding:1.5rem;
        }
    }
}

@media screen and (max-width:649px) {
    
}

@media screen and (max-width:599px) {
    .main table td {
        display:block;
        text-align: center;
        width:100% !important;
        margin-bottom:1em;
    }

        .main table td h3 {
            margin-bottom:0;
            font-size:2em;
        }
}

@media screen and (max-width:459px) {

}

@media screen and (max-width:419px) {

}

@media screen and (max-width:299px) {

}