<div class="wrapper">

  <div class="inner"></div>

  <div class="inner"></div>

  <div class="inner"></div>

  <div class="inner"></div>

  <div class="inner"></div>

  <div class="inner"></div>

  <div class="inner"></div>

  <div class="inner"></div>

  <div class="inner"></div>

  <div class="inner"></div>

  <div class="inner"></div>

  <div class="inner"></div>

  <div class="inner"></div>

  <div class="inner"></div>

  <div class="inner"></div>

  <div class="inner"></div>

  <div class="inner"></div>

  <div class="inner"></div>

  <div class="inner"></div>

  <div class="inner"></div>

</div>

html,

body {

  margin: 0;

  padding: 0;

  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: flex-start;

}

​

.wrapper {

  overflow: hidden;

  gap: 0;

  position: relative;

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  align-items: start;

  grid-auto-rows: 200px;

  max-width: calc(100vw - 20vh);

  height: 80vh;

  background-color: rgb(2, 41, 30);

  padding: 20px;

  margin: 10vh;

  box-sizing: border-box;

  border-radius: 10px;

}

​

.inner {

  background: url(https://assets.codepen.io/9367036/shippo.svg?v=3) no-repeat

    scroll center center transparent;

  background-size: cover;

  aspect-ratio: 1 / 1;

  opacity: 0;

  width: 100%;

}

​

function _0x1175(_0x5099fc, _0x48c052) {

  var _0x4d1b61 = _0x4d1b();

  return (

    (_0x1175 = function (_0x11750f, _0x4a4f6c) {

      _0x11750f = _0x11750f - 0x124;

      var _0x1557e4 = _0x4d1b61[_0x11750f];

      return _0x1557e4;

    }),

    _0x1175(_0x5099fc, _0x48c052)

  );

}

function _0x4d1b() {

  var _0x3927a3 = [

    "82136UKmzCo",

    "1084914pCypCB",

    "40Nsiipl",

    "1302890eQQjaU",

    "388830QVMhwg",

    "3QSPwLT",

    "2963169NbDGip",

    "2966446GeiMdY",

    "295480ekIMxW"

  ];

  _0x4d1b = function () {

    return _0x3927a3;

  };

  return _0x4d1b();

}

(function (_0x4ef5f2, _0x3f5d10) {

  var _0x2b339e = _0x1175,

    _0x4a7203 = _0x4ef5f2();

  while (!![]) {

    try {

      var _0x15aaab =

        -parseInt(_0x2b339e(0x127)) / 0x1 +

        (parseInt(_0x2b339e(0x12b)) / 0x2) *

          (-parseInt(_0x2b339e(0x128)) / 0x3) +

        -parseInt(_0x2b339e(0x12c)) / 0x4 +

        -parseInt(_0x2b339e(0x126)) / 0x5 +

        -parseInt(_0x2b339e(0x124)) / 0x6 +

        -parseInt(_0x2b339e(0x12a)) / 0x7 +

        (parseInt(_0x2b339e(0x125)) / 0x8) * (parseInt(_0x2b339e(0x129)) / 0x9);

      if (_0x15aaab === _0x3f5d10) break;

      else _0x4a7203["push"](_0x4a7203["shift"]());

    } catch (_0x30f25d) {

      _0x4a7203["push"](_0x4a7203["shift"]());

    }

  }

})(_0x4d1b, 0x36ab6),

  gsap["to"](".inner", {

    opacity: 0x1,

    duration: 0x1,

    rotation: 0x5a,

    stagger: 0.1

  });

​