{% extends "jinja/types/page.html" %}

{% set title %}Services{% endset %}

{% block content %}
<div class="row pt-2 pb-4">
    <div class="col">
        <div class="card">
            <img class="img-fluid" class="card-img-top"
                    src="../static/img/services_dog_walking_card_lg.png"
                    srcset="../static/img/services_dog_walking_card_sm.png 540w,
                        ../static/img/services_dog_walking_card_md.png 720w,
                        ../static/img/services_dog_walking_card_lg.png 960w,
                        ../static/img/services_dog_walking_card_xl.png 1140w"
                    sizes="50vw" alt="Woman walking dog">
            <div class="card-body">
                <h1 class="card-title text-center text-primary">Walking</h1>

                <hr>

                <h2 class="text-success text-center">$20+/visit</h2>

                <hr class="invisible">

                <p class="text-secondary">
                    Service includes 30 minute walk for your pet. Bags for poop
                    clean-up are included.
                </p>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="card">
            <img class="img-fluid" class="card-img-top"
                src="../static/img/services_house_sitting_card_lg.png"
                srcset="../static/img/services_house_sitting_card_sm.png 540w,
                    ../static/img/services_house_sitting_card_md.png 720w,
                    ../static/img/services_house_sitting_card_lg.png 960w,
                    ../static/img/services_house_sitting_card_xl.png 1140w"
                sizes="50vw" alt="Dog eating from food bowl">
            <div class="card-body">
                <h1 class="card-title text-center text-primary">
                    House sitting
                </h1>

                <hr>

                <h2 class="text-success text-center">$38+/night</h2>

                <hr class="invisible">

                <p class="text-secondary">
                    Service includes in-home overnight stays and animal care.
                </p>
            </div>
        </div>
    </div>
</div>

<div class="d-flex justify-content-center">
    <a href="{{ url_for('forms.meet_and_greet') }}">
        <button class="btn btn-primary text-light">
            Request meet & greet
        </button>
    </a>
</div>
{% endblock %}