<div class="card h-100">
    <div class="card-body overflow-hidden">
        <div class="row gx-2 h-100">
            <div class="col-3 d-none d-xl-flex h-100 align-items-center">
                <picture>
                    <img class="w-100" src="{{webRoot}}/assets/images/refer.svg" alt="{{ config.defaultImgAlt }}">
                </picture>
            </div>
            <div class="col-12 col-xl-6 d-flex flex-column justify-content-center align-items-center text-center h-100">
                <p class="fw-bold fs-5">Refer a friend and get one month's pro subscription free</p>
                <p class="text-muted">We'll give you a month's pro subscription for every friend that signs up to Apollo.</p>
                <a href="#" class="btn btn-outline-secondary btn-sm text-body"><i class="ri-file-copy-line align-middle"></i> Copy invite code</a>
            </div>
            <div class="col-3 d-none d-xl-flex h-100 align-items-center">
                <picture>
                    <img class="w-100" src="{{webRoot}}/assets/images/refer-2.svg" alt="{{ config.defaultImgAlt }}">
                </picture>
            </div>
        </div>
    </div>
</div>
