body {
    display: grid;
    height: 100dvh;
    grid-template-rows: min-content 1fr min-content;
}

#user-bar {
    grid-row: 4;
   height:40px;
}

.site-links {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
}

header {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #9ab4ba;

#search-container .search-toggle {
    background-color: #9ab4ba;
    border-radius: 100%;

   &:hover {
       background-color: white;
       color: #9ab4ba;
   }
}

}
#top-nav {
    display: none;
}

.btns {
   display:flex;
   justify-content:end;
   gap:10px;
   margin-bottom:10px;

   div {
      display:flex;
      gap:4px;
   }

   .btn {
text-align:center;
      border:0;
      padding:10px;
      background-color: #dbe4e6;
      border-radius:7px;

      &:hover {
         background-color: #9ab4ba;
      }
   }
    @media (min-width:1124px) {
order:3;
      flex-direction:column;
   justify-content:start;

}
}

.intro {
        display: grid;
    font-size: 20px;
    line-height: 25px;
    gap:15px;

    p {
        margin-bottom: 1em;
        margin-top: 0;
    }

    @media (min-width:1024px) {
        grid-template-columns: 1fr 2fr;

.btns { grid-column:1 / span 2;  }
      }

    @media (min-width:1124px) {
        line-height: 34px;
        gap: 25px;
        padding-top: 30px;
        font-size: 18px;
        grid-template-columns: 2fr 4fr 1fr;
        gap: 50px;
        .btns { grid-column:span 1;}
    }

    img {
        max-width: 100%;
        margin-bottom: 20px;
    }
}

#content {
    overflow: auto;
}

.browse,
.page {
    .title {
        display: none;
    }

    #content {
        .preview-block {
            display: flex;
            flex-direction: column;

            h2 {
                margin-bottom: 0px;
            }

            &>a:last-of-type {
                display:none;
            }

            .resource-list.preview {
                order: 2;
                display: grid;
                gap: 10px;

                @media (min-width:768px) {
                    grid-template-columns: repeat(4, 1fr);
                }

                @media (min-width:1124px) {
                    grid-template-columns: repeat(6, 1fr);
                }

            }
        }

        .resource-list {
            display: grid;
            gap: 15px;

            @media (min-width:768px) {
                grid-template-columns: repeat(5, 1fr);
            }

            .item {
                width: 100%;
                background-color: #9ab4ba;
                padding: 10px;
                border-radius: 5px;
                text-align: center;
                display: flex;
                gap: 10px;
                flex-direction: column;

                h4 a {
                    font-family: "Lato";
                    background-color: transparent;
                }

                .description {
                    display: none;
                }
            }
        }
    }
}

.search #content h1 {
    margin-bottom: 75px;
}

.title {
    font-family: "Lato";
}

.results h2 {
    display: none;
}

.results ul {
    margin-bottom: 50px;
}

.items.results>ul+a {
    font-family: "Lato";
    border: 0;
    padding: 15px;
    border-radius: 50px;
    background-color: transparent;
}

.results>ul+a:hover {
    background-color: #dbe4e6;
}

footer {
    width: 100%;
    background-color: #9ab4ba;
    display: flex;
    padding: 10px;
    padding-right: 48px;
    justify-content: end;
    gap: 20px;
}

@media (min-width:1440px) {
    #content {
        margin-left: 100px;
        margin-right: 100px;
    }

    .search #content {
        padding-top: 75px;
    }

    footer {
        padding-right: 148px;
    }

    header {
        padding-left: 148px;
        padding-right: 148px;
        gap: 50px;
    }
}

button, .advanced-search, input[type="submit"] {
    line-height: normal;
    font-family: 'Lato';
    font-weight: 800; 
 border:0;
      padding:10px;
      background-color: #dbe4e6;
      border-radius:7px;

      &:hover {
         background-color: #9ab4ba;
      }
}

.sorting {
display: flex;
    align-items: center;
    gap: 5px;
}

select {
height:auto;
}

#hasmedia-queries .inputs {
 input {
height:15px;
}
.value {
gap:15px;
}
}