/* Custom (modern) CSS */

:root {
    --srCols: [main-start] 1fr [content-start] clamp(320px, 100%, 1110px) [content-end] 1fr [main-end];
   
   
}

section {

    &.search-results {
      display:grid;
      grid-template-columns:var(--srCols);
      grid-template-areas:". header ." ". page ." ". footer .";

        header {
            grid-area:header;
            h3 {
                margin: 0 !important;
                font-size: 20px;
                padding: 0 20px;

               
            }
        }

        main {

               grid-area:page;
                
        
                article {
                    border-bottom:1px solid var(--br-navy);
                    display:grid;
                    grid-template-areas:"image header" "image copy";
                    grid-template-columns:120px 1fr;
                    grid-template-rows:50px 1fr;
                    padding: 20px;
                    gap: 0 10px;
                    

                    img, picture {
                        grid-area:image;
                        width:120px;
                        aspect-ratio:1;
                        object-fit:cover;
                    }

                    h4 {
                        grid-area:header;
                        display:flex;
                        align-items:center;
                        justify-content:space-between;
                        margin: 0;
                        font-size: 16px;

                        a {
                            color:var(--br-navy);
                            text-decoration:none;

                            &:hover, 
                            &:active {
                                text-decoration:underline;
                            }
                        }

                         span {
                    color:white;
                    background:var(--br-navy);
                    font-weight:normal;
                    padding:5px 10px;
                    font-size:12px;

                    
                }
                    }
                    div {
                        grid-area:copy;
                    p {
                        float:none;
                        margin-bottom:10px;
                        font-size: 16px;
                        line-height: 20px;

                        &.contact {
                            margin:0;
                        }
                    }
                }

                &.js-hide {
                    display:none;

                }

                }
        
            }

        footer {
            grid-area:footer;
            display:flex;
            justify-content:center;

            button {
                margin:30px auto;
                border:var(--br-navy) solid 1px;
                background:white;
                font-weight:bold;
                cursor:pointer;
                transition:all 0.3s;
                margin: 30px auto 0 auto;
                padding: 12px 15px;
                font-size: 14px;

                &:hover {
                    background:var(--br-navy);
                    color:white;
                }
            }

        }


}
}