#gallery {
    background-color: var(--offwhite);
}

    #gallery #wrapper {
        background-color: var(--offwhite);
    }

        #gallery .hero {
            display: flex;
            gap: 0;
            height: 100dvh;
            width: 100%;
        }

            #gallery .left,
            #gallery .right {
                height: 100%;
                width: 50%;
            }

            #gallery .left {
                color: var(--black);
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 4rem;
            }

                #gallery .left .title {color: var(--black);}

            #gallery .thumbnail {
                background: #FFF;
            }

        #gallery #images,
        #gallery .images {
            background-color: var(--offwhite);
            display: grid;
            gap: 1rem;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            padding: 4rem;
            min-height: 100dvh;
            width: 100%;
        }

            #gallery #images img,
            #gallery .images img {
                aspect-ratio: 2 / 3;
                background-color: rgb(128,128,128);
                object-fit: cover;
                width: 100%;
            }

        #gallery #inquire {
            background-color: white;
            margin: 0 auto;
            padding: 4rem;
        }

            #gallery #inquire h2 {color: var(--black);}

            #gallery #inquire form {
                display: flex;
                flex-direction: column;
                gap: 1rem;
                margin: 2rem auto 0 auto;
                width: 100%;
                max-width: 720px;
            }

                #gallery #inquire form input,
                #gallery #inquire form select {
                    background-color: transparent;
                    border: 1px solid var(--black);
                    border-radius: 0;
                    padding: 1rem;
                    transition: all 0.25s cubic-bezier(0.5, 0, 0.5, 1);
                    width: 100%;
                }

                #gallery #inquire form input:focus,
                #gallery #inquire form select:focus {
                    border-color: var(--gold);
                    outline: none;
                }

                #gallery #inquire form input:hover,
                #gallery #inquire form select:hover {
                    border-color: var(--gold);
                }

                #gallery #inquire form button {
                    background: linear-gradient(to bottom, transparent 50%, var(--black) 50%) no-repeat center top / 100% 200%;
                    border: 1px solid var(--black);
                    color: var(--black);
                    cursor: pointer;
                    font-family: 'Playfair Display', serif;
                    font-size: 1rem;
                    padding: 1rem;
                    transition: all 0.5s cubic-bezier(0.5, 0, 0.5, 1);
                }

                #gallery #inquire form button:hover {
                    background-position: center bottom;
                    color: var(--offwhite);
                }

                #gallery #inquire form button:focus {outline: none;}