<h2>Waterfall</h2>

<div class="board-wrapper">
  <div class="board waterfall-board">
    <div class="card image-card" style="--n: 1; --img-ratio: 576/720;"><img
        src="https://cdn.donmai.us/720x720/3b/9c/3b9c82dbf7567d4473c9a49a1198b703.webp" width="576"
        height="720"></div>
    <div class="card image-card" style="--n: 2; --img-ratio: 576/720;"><img
        src="https://cdn.donmai.us/720x720/54/cb/54cb64c80f5be4cf1f2d60e3a8015546.webp" width="576"
        height="720"></div>
    <div class="card image-card" style="--n: 3; --img-ratio: 720/720;"><img
        src="https://cdn.donmai.us/720x720/cf/df/cfdf0f4c16952ceb7104a43499f0c048.webp" width="720"
        height="720"></div>
    <div class="card image-card" style="--n: 4; --img-ratio: 720/360;"><img
        src="https://cdn.donmai.us/720x720/ce/25/ce25bd616b1a5334be86841a7f4b43ba.webp" width="720"
        height="360"></div>
    <div class="card image-card" style="--n: 5; --img-ratio: 720/360;"><img
        src="https://cdn.donmai.us/720x720/3b/73/3b73f567a57e510f32f06dd127c8856f.webp" width="720"
        height="360"></div>
    <div class="card image-card" style="--n: 6; --img-ratio: 720/405;"><img
        src="https://cdn.donmai.us/720x720/21/25/212519e523beb2f1f2e5ceac097bd5f4.webp" width="720"
        height="405"></div>
    <div class="card image-card" style="--n: 7; --img-ratio: 720/450;"><img
        src="https://cdn.donmai.us/720x720/b1/2f/b12f18a6f2b01155747ee0c2212c7f57.webp" width="720"
        height="450"></div>
    <div class="card image-card" style="--n: 8; --img-ratio: 720/720;"><img
        src="https://cdn.donmai.us/720x720/76/0e/760ec287b84e25d895e67c7ad35b0c66.webp" width="720"
        height="720"></div>
    <div class="card image-card" style="--n: 9; --img-ratio: 720/720;"><img
        src="https://cdn.donmai.us/720x720/53/96/53965a806ffc08f59608c491e7abaa26.webp" width="720"
        height="720"></div>
    <div class="card image-card" style="--n: 10; --img-ratio: 720/480;"><img
        src="https://cdn.donmai.us/720x720/ac/ac/acac5f2da833abec44c19b7a9ef88912.webp" width="720"
        height="480"></div>
    <div class="card image-card" style="--n: 11; --img-ratio: 720/540;"><img
        src="https://cdn.donmai.us/720x720/9e/c7/9ec79c1bd5349132f3dbd35071f8286b.webp" width="720"
        height="540"></div>
    <div class="card image-card" style="--n: 12; --img-ratio: 720/405;"><img
        src="https://cdn.donmai.us/720x720/8d/88/8d88b4aad5cdaecf2574c8f9b8bc1223.webp" width="720"
        height="405"></div>
    <div class="card image-card" style="--n: 13; --img-ratio: 720/509;"><img
        src="https://cdn.donmai.us/720x720/3e/2e/3e2e2d772ec8693402b15c25d340a287.webp" width="720"
        height="509"></div>
    <div class="card image-card" style="--n: 14; --img-ratio: 720/360;"><img
        src="https://cdn.donmai.us/720x720/46/55/46552dbe3ba800943651c8cce13e6085.webp" width="720"
        height="360"></div>
    <div class="card image-card" style="--n: 15; --img-ratio: 720/509;"><img
        src="https://cdn.donmai.us/720x720/8f/3a/8f3a290c41088c529c42a629b536b2b3.webp" width="720"
        height="509"></div>
    <div class="card image-card" style="--n: 16; --img-ratio: 720/509;"><img
        src="https://cdn.donmai.us/720x720/ea/e8/eae82d4fa31d3ef127b3e3f0bac3afda.webp" width="720"
        height="509"></div>
    <div class="card image-card" style="--n: 17; --img-ratio: 720/509;"><img
        src="https://cdn.donmai.us/720x720/cf/6c/cf6c61f09348d3675a499c8fbfe148fb.webp" width="720"
        height="509"></div>
    <div class="card image-card" style="--n: 18; --img-ratio: 720/720;"><img
        src="https://cdn.donmai.us/720x720/d9/21/d9213403d0340c0896657a36772bf3e2.webp" width="720"
        height="720"></div>
    <div class="card image-card" style="--n: 19; --img-ratio: 720/720;"><img
        src="https://cdn.donmai.us/720x720/83/34/833421b09db1959bd68bd89fe3d56c11.webp" width="720"
        height="720"></div>
    <div class="card image-card" style="--n: 20; --img-ratio: 720/509;"><img
        src="https://cdn.donmai.us/720x720/e9/1b/e91b02876f8f4b15c507b549fe284f72.webp" width="720"
        height="509"></div>
    <div class="card image-card" style="--n: 21; --img-ratio: 720/540;"><img
        src="https://cdn.donmai.us/720x720/52/c1/52c16a08aecd316dd1dd9176b03222da.webp" width="720"
        height="540"></div>
    <div class="card image-card" style="--n: 22; --img-ratio: 720/508;"><img
        src="https://cdn.donmai.us/720x720/53/0e/530eadf9cc5b9060b908c49c9bd05842.webp" width="720"
        height="508"></div>
    <div class="card image-card" style="--n: 23; --img-ratio: 720/405;"><img
        src="https://cdn.donmai.us/720x720/47/95/479527ab73a4169aea8d95b80ffff4db.webp" width="720"
        height="405"></div>
    <div class="card image-card" style="--n: 24; --img-ratio: 720/212;"><img
        src="https://cdn.donmai.us/720x720/fc/b9/fcb9290b658f5705f2cab4ebe11cea33.webp" width="720"
        height="212"></div>
    <div class="card image-card" style="--n: 25; --img-ratio: 720/212;"><img
        src="https://cdn.donmai.us/720x720/ea/27/ea272960be22a3f1ecf02dc393558781.webp" width="720"
        height="212"></div>
    <div class="card image-card" style="--n: 26; --img-ratio: 720/432;"><img
        src="https://cdn.donmai.us/720x720/81/68/8168bcdc8448dfd5ea24262209a1aeee.webp" width="720"
        height="432"></div>
    <div class="card image-card" style="--n: 27; --img-ratio: 720/514;"><img
        src="https://cdn.donmai.us/720x720/11/22/112206f6b1de68fde582124639ead08e.webp" width="720"
        height="514"></div>
    <div class="card image-card" style="--n: 28; --img-ratio: 720/510;"><img
        src="https://cdn.donmai.us/720x720/a6/08/a60816c043dde58d45d77bb93182fa67.webp" width="720"
        height="510"></div>
    <div class="card image-card" style="--n: 29; --img-ratio: 125/720;"><img
        src="https://cdn.donmai.us/720x720/cf/b7/cfb76617031222d9910ea20d70d1b629.webp" width="125"
        height="720"></div>
    <div class="card image-card" style="--n: 30; --img-ratio: 720/455;"><img
        src="https://cdn.donmai.us/720x720/7a/7d/7a7dcbbf680fde8afcd76a9741f28438.webp" width="720"
        height="455"></div>
    <div class="card image-card" style="--n: 31; --img-ratio: 576/720;"><img
        src="https://cdn.donmai.us/720x720/43/aa/43aaf04717ea85338671fd026e492d63.webp" width="576"
        height="720"></div>
    <div class="card image-card" style="--n: 32; --img-ratio: 720/409;"><img
        src="https://cdn.donmai.us/720x720/8e/1a/8e1ab1954a0b506fb65235be11b4ecee.webp" width="720"
        height="409"></div>
    <div class="card image-card" style="--n: 33; --img-ratio: 720/346;"><img
        src="https://cdn.donmai.us/720x720/e3/40/e340471fa72b36b991507610b3640819.webp" width="720"
        height="346"></div>
    <div class="card image-card" style="--n: 34; --img-ratio: 720/507;"><img
        src="https://cdn.donmai.us/720x720/8c/c4/8cc4902bd10bae35bbfcf54656339050.webp" width="720"
        height="507"></div>
    <div class="card image-card" style="--n: 35; --img-ratio: 720/507;"><img
        src="https://cdn.donmai.us/720x720/c1/e5/c1e58c0699e54f07ccbe4837851ac2e3.webp" width="720"
        height="507"></div>
    <div class="card image-card" style="--n: 36; --img-ratio: 720/535;"><img
        src="https://cdn.donmai.us/720x720/71/23/7123dddcc464ab8fe5d4490513f2f9d0.webp" width="720"
        height="535"></div>
    <div class="card image-card" style="--n: 37; --img-ratio: 513/720;"><img
        src="https://cdn.donmai.us/720x720/51/1e/511eebe3b06e87d78b5c5d45b7bec3f8.webp" width="513"
        height="720"></div>
    <div class="card image-card" style="--n: 38; --img-ratio: 720/720;"><img
        src="https://cdn.donmai.us/720x720/90/d8/90d84d2a8f6b609f46fbe7da608e50e9.webp" width="720"
        height="720"></div>
    <div class="card image-card" style="--n: 39; --img-ratio: 720/368;"><img
        src="https://cdn.donmai.us/720x720/8e/92/8e9239ff994043d091fe2da2c5c39496.webp" width="720"
        height="368"></div>
    <div class="card image-card" style="--n: 40; --img-ratio: 720/509;"><img
        src="https://cdn.donmai.us/720x720/35/59/3559ff2551ab409fdf01aceb7bb529fe.webp" width="720"
        height="509"></div>
  </div>
</div>

@charset "UTF-8";

body {
  margin: 0;
  background-color: rgb(39, 39, 39);
  color: white;
  font-family: sans-serif;
}

*,
::before,
::after {
  box-sizing: border-box;
}

/* boards */

.board-wrapper {
  container-type: inline-size;
}

@property --board-width {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

.board {
  --board-width: 100cqw;

  & img,
  & video {
    display: block;
  }
}

.waterfall-board {
  --column-min-width: 200px;
  --gap: 10px;

  --img-min-ratio: 2/5;
  --img-max-ratio: 2/1;

  display: grid;
  justify-content: center;
  /* this is important */
  align-items: start;
  gap: 0 var(--gap);
  /* this is needed for horizontal-order, note: when a card column-span >=1 horiz-order breaks */
  grid-auto-flow: row dense;

  --column-count: max(1, round(down, tan(atan2(var(--board-width) + var(--gap), var(--column-min-width) + var(--gap))), 1));
  --column-width: calc((var(--board-width) - (var(--column-count) - 1) * var(--gap)) / var(--column-count));
  /*grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--column-min-width)), 1fr));*/
  grid-template-columns: repeat(var(--column-count), 1fr);

  --row-height: calc(1px / 4);
  grid-auto-rows: var(--row-height);

  .card {
    /* defaults */
    --card-extra-height: 0px;
    /* --column-span: 1; */
    /*
    --_img-ratio
    --card-ratio-js
    --card-height
    --card-height-js
    */

    margin-bottom: var(--gap);
    --_img-ratio: min(max(var(--img-ratio), var(--img-min-ratio)), var(--img-max-ratio));

    /* note: img-ratio is a <ratio> and not a <number>, so it needs parentheses around for correct calculation */
    --card-height: calc(var(--column-width) / (var(--_img-ratio)) + var(--card-extra-height));
    --card-height-js: calc(var(--column-width) / (var(--card-ratio-js)));

    /* for column-span > 1*/
    /* --card-width: calc((var(--column-width) + var(--gap)) * min(var(--column-count), var(--column-span)) - var(--gap));
    --card-height: calc(var(--card-width) / (var(--card-ratio)) + var(--card-extra-height));
    --card-height-js: calc(var(--card-width) / (var(--card-ratio-js)));
    grid-column: span min(var(--column-count), var(--column-span)); */

    grid-row: span round(tan(atan2(var(--card-height-js, var(--card-height)) + var(--gap), var(--row-height))), 1);

  }
}

.waterfall-board.fixed-size {
  /* column-count is the same */
  --column-width: min(var(--board-width), var(--column-min-width));
  /*grid-template-columns: repeat(auto-fit, min(100%, var(--column-min-width)));*/
  grid-template-columns: repeat(var(--column-count), var(--column-min-width));
}

.waterfall-board.horizontal-order .card {
  grid-column: mod(var(--n), var(--column-count));

  /* for column-span > 1*/
  /* this don't works right */
  /* grid-column: mod(var(--n), var(--column-count)) / span min(var(--column-count), var(--column-span)); */
}

/* cards */

.card {
  position: relative;
}

/* image-card */

.image-card img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--_img-ratio);

  object-fit: cover;
  object-position: left top;
}