#header-images {
    display: flex;
    justify-content: center; /* optional: center the pair */
    align-items: center;
}

    #header-images img {
        border: none;
        width: 50%; /* both fit side-by-side on all screens */
        height: auto;
    }

#condolences-page .intro {
    background-image: url("/images/condolences/logo_transparent.png"); /* your image */
    background-repeat: no-repeat;
    background-position: 77rem 3rem;
    background-size: 20%; /* control size */
    overflow: auto;
    opacity: 1; /* keep div normal */
}

    #condolences-page .intro h2 {
        font-family: lato, arial, sans-serif;
        font-size: 3.2rem;
        font-weight: bold;
    }

    #condolences-page .intro h3 {
        color: #757575;
        font-size: 2rem;
        font-weight: 400;
    }

.condolences-form {
    background-color: #F9F9F9;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding-left: 3rem;
    display: flex; /* put form + ribbon side-by-side */
    justify-content: space-between;
    align-items: flex-start; /* align them at the top */
    gap: 25rem;
    margin-bottom: 5rem; /* spacing between form and ribbon */
}

    .condolences-form .form {
        flex: 1; /* form takes available space on left */
    }

        .condolences-form .form form {
            margin-left: 1rem;
        }

            .condolences-form .form form textarea {
                width: 37.6rem;
                height: 13.6rem;
                margin-top: 1rem;
            }

            .condolences-form .form form label {
                font-weight: 600;
            }

            .condolences-form .form form input {
                margin-top: 1rem;
            }
            .condolences-form .form form select {
                margin-top: 1rem;
                width: calc(100% - 22px);
            }
            .condolences-form .form form select option {
                text-transform: capitalize;
            }
            .condolences-form .form form .primary-button {
                text-transform: capitalize; 
            }

.form .next-step {
    background-color: #E8F4F8;
    border-left: 2px solid #3498DB;
    padding: 2rem;
    margin-bottom: 4rem;
}

    .form .next-step p:first-child {
        font-size: 1.8rem;
        font-weight: 600;
    }

    .form .next-step p:last-child {
        font-family: Arial;
        font-size: 1.6rem;
    }

.ribbon {
    width: 36rem; /* adjust width based on your image */
    height: 70rem;
    background-image: url("/images/condolences/side-ribbon.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    padding: 0 15rem;
    margin-left: -10rem;
    text-align: center;
}

.ribbon img {
    border: none;
    margin-top: 5rem;
    width: 15rem;
}

.ribbon p {
    color: #FFFFFF;
    font-family: lato-light;
}

.success-message {
    padding: 1rem;
    background: #d4edda;
    color: #155724;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.error-message {
    padding: 1rem;
    background: #f8d7da;
    color: #721c24;
    border-radius: 4px;
    margin-bottom: 1rem;
}

/* Mobile (768px) */
@media screen and (max-width: 800px) {

    /* Intro section */
    #condolences-page .intro {
        background-position: 20rem 29rem;
        background-size: 40%;
        padding: 1rem;
    }

        #condolences-page .intro h2 {
            font-size: 2.6rem;
        }

        #condolences-page .intro h3 {
            font-size: 1.7rem;
        }

        #condolences-page .intro p {
            font-size: 1.7rem;
        }

    /* make the parent a flex container */
    .condolences-form-wrapper {
        display: flex;
        flex-direction: column;
    }

    /* Main form layout */
    .condolences-form {
        order: 2;
        flex-direction: column; /* stack form & ribbon */
        align-items: center;
        gap: 4rem;
        padding: 2rem;
        margin-left: 0;
    }

        .condolences-form .form {
            width: 100%;
        }

            /* Form elements full width */
            .condolences-form .form form textarea,
            .condolences-form .form form input[type="text"],
            .condolences-form .form form input[type="email"],
            .condolences-form .form form select {
                width: 100% !important;
            }

    .form .next-step {
        margin-bottom: 2rem;
    }

    /* Ribbon */
    .ribbon {
        width: 90%; /* take most of the screen */
        max-width: 36rem; /* optional, keeps it neat on tablet */
        height: 60rem;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top center;
        padding: 2rem 1rem 3rem 1rem; /* spacing inside ribbon */
        margin: 0 auto 2rem auto; /* center horizontally */
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        box-sizing: border-box;
    }

    .ribbon img {
        width: 12rem;
        margin: 1rem 0;
    }

    .ribbon p {
        font-size: 1.6rem;
        padding: 0 3rem;
        margin-top: 2rem;
        text-align: center;
        word-wrap: break-word; 
    }
}