{{ extends 'global/Page.html' }}
{{ block title }}Today's Experiment{{ endblock }}

{{ block content }}

<style>
.intro-layout {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 40px;
}
.intro-layout-text {
    flex: 1;
    min-width: 280px;
}
.intro-layout-image {
    flex: 2;
    min-width: 380px;
    text-align: center;
}
</style>

<div class="intro-layout">
    <div class="intro-layout-text">
        <p>In the <b>island assignment process</b>, there are <b>{{ C.NUM_PLAYERS }}</b> travelers and <b>{{ C.NUM_CAP }}</b> islands.</p>
        <p>Each island only has room for <b>{{ C.NUM_QUOTA }}</b> travelers.</p>
    </div>
    <div class="intro-layout-image">
        <img src="{{ static 'images/instructions/intro_img_150.png' }}" style="max-width: 100%; max-height: 460px;">
    </div>
</div>

<p></p>
{{ next_button }}

{{ endblock }}