HbListViewItem:portrait{
    layout: citylist-portrait;
}

HbListViewItem:landscape{
    layout: citylist-landscape;
}

HbListViewItem[layoutName="citylist-portrait"]::icon-1{
    top: -var(hb-param-margin-gene-top);
    left: -var(hb-param-margin-gene-left);
    right: var(hb-param-margin-gene-middle-horizontal);
    bottom: var(hb-param-margin-gene-bottom);

    fixed-height: var(hb-param-graphic-size-primary-large);
    fixed-width: var(hb-param-graphic-size-primary-large);
}

HbListViewItem[layoutName="citylist-portrait"]::text-1{
    top: -var(hb-param-margin-gene-top);
    right: var(hb-param-margin-gene-middle-horizontal);
    text-height: var(hb-param-text-height-tiny);
    font-variant: secondary;
    text-align: left;
}

HbListViewItem[layoutName="citylist-portrait"]::text-2{
    top: -var(hb-param-margin-gene-middle-vertical);
    right: var(hb-param-margin-gene-middle-horizontal);
    text-height: var(hb-param-text-height-primary);
    font-variant: primary;
    text-align: left;
}

HbListViewItem[layoutName="citylist-portrait"]::text-3{
    top: -var(hb-param-margin-gene-middle-vertical);
    right: var(hb-param-margin-gene-right);
    bottom: var(hb-param-margin-gene-bottom);

    text-height: var(hb-param-text-height-tiny);
    font-variant: secondary;
    text-align: left;
}

HbListViewItem[layoutName="citylist-landscape"]::text-3{
    right: var(hb-param-margin-gene-right);

    text-height: var(hb-param-text-height-tiny);
    font-variant: secondary;
    text-align: right;
    fixed-width: 24un;
}

HbListViewItem[layoutName="citylist-portrait"]::icon-2{
    top: -var(hb-param-margin-gene-top);
    right: var(hb-param-margin-gene-right);

    fixed-height: var(hb-param-graphic-size-secondary);
    fixed-width: var(hb-param-graphic-size-secondary);
}

HbListViewItem[layoutName="citylist-portrait"]::text-4{
    right: var(hb-param-margin-gene-right);
    text-height: var(hb-param-text-height-tiny);
    font-variant: secondary;
    text-align: right;
    fixed-width: 16un;
}