h1 {
    margin-bottom:3rem;
}

.h1 {
    display: block;
    font-size: 3em;
    letter-spacing: 0.05em;
    font-weight: 200;
    text-shadow: 1px 1px #999;
    text-decoration: none;
    color: #000;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    margin-bottom:3rem;
}

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

.list-item {
    display:grid;
    grid-template-columns: 1fr;
    border:1px solid #666;
    text-align: center;
    text-decoration: none;

    &:has(.image){
        grid-template-columns: 1fr 1fr;
        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:3rem;
        background-color:#fff;
        transition:background-color 0.5s;

        & h2 {
            font-size:2rem;
            line-height:1.1;
            margin-bottom:0.5lh;
            letter-spacing: -0.05em;
        }

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

    &:hover {
        & .text {
            background-color:#eee;
        }
    }
}

.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 #666;
            padding:0.5rem 0.75rem;
            text-decoration: none;

            &:hover {
                background-color:#eee;
            }
        }

        &.active {
            & a {
                background-color:#eee;
            }
        }
    }
}

.head {
    display:grid;
    grid-template-columns: 1fr;
    border:1px solid #666;
    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;
        }
    }

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

        & h1,
        & .h1 {
            font-size:2rem;
            line-height:1.1;
            margin-bottom:0.5lh;
            letter-spacing: -0.05em;
        }

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

article {
    p {
        font-size:1rem;
        line-height:1.6;
        margin-bottom:1lh;
    }
}

.others {
    margin-block:3rem;

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

    & .other-list {
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
        gap:1rem;
    
        & .other {
            border:1px solid #666;
            text-decoration: none;
            background-color:#fff;
            transition:background-color 0.5s;
    
            & 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;
                    margin-bottom:0.25rem;
                }
            }

            &:hover {
                background-color:#eee;
            }
        }
    }
}

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

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