@import url('root.css');

body{
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    color: var(--green);
    font-family: var(--body-font);

    .left-col{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
        padding: clamp(2rem, 8vw, 6rem);
        background-color: var(--bone);

        h1{
            font-family: var(--heading-font);
            font-size: clamp(2.5rem, 5vw, 4.5rem);
            font-weight: 500;
            line-height: 1.1;
            margin: 0;
        }

        h2{
            font-family: var(--body-font);
            font-size: clamp(1rem, 2vw, 1.5rem);
            font-weight: 400;
            letter-spacing: 0.35em;
            text-transform: uppercase;
            color: var(--goldenrod);
            margin: 0;
        }

        p{
            font-size: 1.125rem;
            line-height: 1.6;
            max-width: 40ch;
            margin: 0.5rem 0 0;
        }
    }

    .right-col{
        background-image: url('../images/coming-soon-right1.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}