body {
    container: body / inline-size;

    .hero-text, .contact-form {
        h6,  p {
            margin-top: 0.5rem;
        }

        h1, h2 {
            margin-bottom: 0;
        }
    }

    header {
        .hero-section {
            display: flex;
            align-items: center;
            gap: 2rem;

            position: relative;
            height: 80%;

            container-type: inline-size;

            .hero-text {
                flex: 2;
                position: absolute;
            }

            img {
                flex: 1;
                max-width: 390px;
                max-height: 277px;

                /* polygon(x1 y1, x2 y2, x3 y3, x4 y4, xn yn) */
                clip-path: polygon(15% 0%, 100% 0%, 100% 43%, 15% 100%);
            }
        }
    }

    main {
        transition: all 2s ease-in-out;

        .wwd-contact-us {
            padding-bottom: 5rem;
        }
    }
}