@layer views{
    body > main{
        background-color: rgb(var(--color-lt-gray));
    }

    main > header{
        background-color: rgb(var(--color-dk-blue));
        color: rgb(var(--color-white));
        padding-bottom: calc(var(--spacer) * 3);

        a{
            color: rgb(var(--color-white));
        }
    }

    .news-list{
        --row-gap: calc(var(--spacer) * 2);

        .news-item{
            display: flex;
            align-items: center;
            background-color: rgb(var(--color-white));
            border: 1px solid rgb(var(--color-md-gray));

            img{
                display: block;
                min-width: 416px;
                max-height: 268px;
                object-fit: cover;
                object-position: center;
            }

            > div{
                padding: calc(var(--spacer) * 2);
            }

            h3{
                margin-bottom: calc(var(--spacer) * 1.25);
            }

            p{
                margin-bottom: calc(var(--spacer) * 1.25);
            }

            time{
                font-size: .875em;
                color: rgb(var(--color-dk-gray));
            }
        }

        form{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: calc(var(--spacer) * 2);
            margin-bottom: calc(var(--spacer) * 2);

            > div{
                flex: 1;
                display: flex;
                align-items: center;
                gap: calc(var(--spacer) * .75);
            }
        }

        legend{
            font-family: var(--font-family-display);
            font-size: 1.333em;
            font-weight: 400;
        }

        label{
            white-space: nowrap;
        }

        select{
            padding: var(--spacer) calc(var(--spacer) * 3) var(--spacer) var(--spacer);
            font-family: var(--font-family-content);
            font-size: 1em;
            background-color: rgb(var(--color-white));
            border: 1px solid rgba(var(--color-md-gray));
            font-weight: 500;
            width: 100%;
            max-width: 280px;
            background-image: url(/images/select-arrow.png);
			background-repeat: no-repeat;
			background-position: calc(100% - 20px) calc(50% + 2px);
            appearance: none;
			-moz-appearance: none;
			-webkit-appearance: none;
        }

        [type="search"]{
            padding: var(--spacer);
            font-family: var(--font-family-content);
            font-size: 1em;
            background-color: rgb(var(--color-white));
            border: 1px solid rgb(118, 141, 152);
            font-weight: 500;
            width: 100%;
            max-width: 370px;
        }

        button{
            padding-block: 15px;
        }
    }
}