.contact {
    background-color: #142f07;
    color: aliceblue;

    display: grid;
    grid-template-columns: 40% 60%;
    align-items: stretch;

    .side-image {
        overflow: hidden;
        width: 100%;
        object-fit: cover;
    }

    .contact-content {
        position: relative;
        overflow: hidden;

        padding: 1vh 2vw;

        &::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;

            width: 70vh;
            height: 70vh;

            background-image: url("images/grapes.svg");
            background-repeat: no-repeat;
            background-size: contain;
            filter: invert(0.6);

            opacity: 0.3;
            transform: translate(20%, -20%);
        }

        > * {
            position: relative;
            z-index: 1;
        }


        h3 {
            max-width: 70%;
        }

        .contact-detail {
            display: flex;
            align-items: center;
            gap: max(0.5vw, 0.5vh);

            img {
                width: max(4vh, 2vw);
            }

            p, a {
                max-width: 100%;
                margin: 0.5vh 0;
            }
        }
    }

    @media(max-width: 1199px) {
        display: flex;
        flex-direction: column;

        .side-image {
            height: 30vh;
            order: -1;
        }

        .contact-content {
            padding: 2vw;
        }
    }

    button {
        color: aliceblue;
        border-style: solid;
        border-color: aliceblue;
        backdrop-filter: blur(5px); /* in case i ever put a real image behind this */
        background-color: rgb(0 0 0 / 0.2);
        border-width: 0.2vh;
        border-radius: 0.5vh;
        margin: 2vh 1vw 2vh 0;
        padding: max(1vh, 1vw) max(2vh, 2vw);
    }
}