2020 boxes

[ REGULAR BOXES ]

1 small box:
<div class="boxcontainer"><div class="Box1"><h2>header</h2>text</div></div>

2 small boxes:
<div class="boxcontainer"><div class="Box1"><h2>header</h2>text</div><div class="Box1"><h2>header</h2>text</div></div>

3 small boxes:
<div class="boxcontainer"><div class="Box1"><h2>header</h2>text</div><div class="Box1"><h2>header</h2>text</div><div class="boxcontainer"><div class="Box1"><h2>header</h2>text</div></div>

1 medium box:
<div class="boxcontainer"><div class="Box2"><h2>header</h2>text</div>

2 medium boxes:
<div class="boxcontainer"><div class="Box2"><h2>header</h2>text</div><div class="Box2"><h2>header</h2>text</div></div>

1 large box:
<div class="boxcontainer"><div class="Box3"><h2>header</h2>text</div></div>

3 small boxes & 1 large box:
<div class="boxcontainer"><div class="Box1"><h2>header</h2>text</div><div class="Box1"><h2>header</h2>text</div><div class="Box1"><h2>header</h2>text</div></div><div class="boxcontainer"><div class="Box3"><h2>header</h2>text</div></div>

2 medium boxes & 1 large box:
<div class="boxcontainer"><div class="Box2"><h2>header</h2>text</div><div class="Box2"><h2>header</h2>text</div></div><div class="boxcontainer"><div class="Box3"><h2>header</h2>text</div></div>

1 small box & 1 medium box:
<div class="boxcontainer"><div class="Box1"><h2>header</h2>text</div><div class="Box2"><h2>header</h2>text</div></div>

[ HOVER BOXES ]

1 small box:
<div class="boxcontainer"><div class="hoverbox1"><h2>header</h2>text</div></div>

2 small boxes:
<div class="boxcontainer"><div class="hoverbox1"><h2>header</h2>text</div><div class="hoverbox1"><h2>header</h2>text</div></div>

3 small boxes:
<div class="boxcontainer"><div class="hoverbox1"><h2>header</h2>text</div><div class="hoverbox1"><h2>header</h2>text</div><div class="boxcontainer"><div class="hoverbox1"><h2>header</h2>text</div></div>

1 medium box:
<div class="boxcontainer"><div class="hoverbox2"><h2>header</h2>text</div>

2 medium boxes:
<div class="boxcontainer"><div class="hoverbox2"><h2>header</h2>text</div><div class="hoverbox2"><h2>header</h2>text</div></div>

1 large box:
<div class="boxcontainer"><div class="hoverbox3"><h2>header</h2>text</div></div>

3 small boxes & 1 large box:
<div class="boxcontainer"><div class="hoverbox1"><h2>header</h2>text</div><div class="hoverbox1"><h2>header</h2>text</div><div class="hoverbox1"><h2>header</h2>text</div></div><div class="boxcontainer"><div class="hoverbox3"><h2>header</h2>text</div></div>

2 medium boxes & 1 large box:
<div class="boxcontainer"><div class="hoverbox2"><h2>header</h2>text</div><div class="hoverbox2"><h2>header</h2>text</div></div><div class="boxcontainer"><div class="hoverbox3"><h2>header</h2>text</div></div>

1 small box & 1 medium box:
<div class="boxcontainer"><div class="hoverbox1"><h2>header</h2>text</div><div class="hoverbox2"><h2>header</h2>text</div></div>