section.gallery{
    width: 100%;
    margin-bottom: 80px;
    display: flex;
    flex-direction: column;

    h2{
        width: 75%;
    }
    .grid{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        height: fit-content;

        margin-bottom: 40px;

        gap: 20px;
    }
    .filter{
        margin-bottom: 32px;
        line-height: 2em;

        select{
            position: relative;
            color: var(--white-color);
            border-radius: 20px;
            background-color: var(--dark-color);
            border-color: transparent;
            padding: 4px 60px 4px 12px;
            font-size: 18px;
            -webkit-appearance: none;
            -ms-appearance: none;
            -moz-appearance: none;
            appearance: none;
            cursor: pointer;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='white' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/></svg>");
            background-repeat: no-repeat;
            background-size: 16px;
            background-position: center right 8px;


        }
    }
    .nav{
        display: flex;
        gap: 16px;
        align-items: center;

        width: fit-content;
        margin: 0 auto 80px auto;

        span{
            padding-bottom: 8px;
        }
        .arrow{
            cursor: pointer;
            border: none;
            background-color: inherit;
            padding: 0;
            margin: 0;
        }
        .arrow:disabled,
        .arrow[disabled]{
            filter: grayscale(0.6);
            cursor: default;
        }
    }
}