{% extends "global/Page.html" %}
{% load otree %}

{% block styles %}
<style>


.wrapper {
  max-width: 1024px;
  margin: 0 auto;
  font: 1.2em Helvetica, arial, sans-serif;
}
.wrapper > * {
  border: 2px groovy #f08c00;
  background-color: #f2f2f2;
  border-radius: 1px;
  padding: 5px;

}

/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 33.33%;
  padding: 3px;
  height: 220px;
  overflow: hidden;
  display: inline-block;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}

<!--.column2 {-->
  <!--float: right;-->
  <!--width: 33.33%;-->
  <!--display: inline-block;-->
  <!--overflow: hidden;-->
<!--}-->

.column2 {
  float: right;
  padding-right: 118px;
  padding-left: 138px;
}


</style>
{% endblock %}

{% block title %}Holiday{% endblock %}

{% block content %}

<p>
 For your holiday, you will fly to the United States of America (USA).
 Please choose your preferred destination in the USA:
</p>

<div class-="wrapper">
<div class="row">
  <div class="column">
    <img src= "{% static 'dcc/miami_jpeg.jpg'%}" alt="Picture Miami" style="width:100%" height="200px">


  </div>
  <div class="column">
    <img src= "{% static 'dcc/newyork_jpeg.jpg'%}" alt="Picture NewYork" style="width:100%" height="200px">

  </div>
  <div class="column">
     <img src= "{% static 'dcc/boston_jpeg.jpg'%}" alt="Picture Boston" style="width:100%" height="200px">


</div>
</div>

<div class="row">
    {% for choice in form.destination_1 %}
    <div class="column2" >  {{ choice }}  </div>
    {% endfor %}

</div>
</div>


{% next_button %}


{% endblock %}