<template>
  <div class="m-4 grid grid-cols-3 gap-4">
    <SquareContainer class="bg-red-100">
      <div>
        <img
          src="https://source.unsplash.com/featured/320x320"
          class="m-auto w-full h-full object-contain"
        />
      </div>
    </SquareContainer>
    <SquareContainer class="bg-blue-100">
      <div>
        <img
          src="https://source.unsplash.com/featured/320x240"
          class="m-auto w-full h-full object-contain"
        />
      </div>
    </SquareContainer>
    <SquareContainer class="bg-green-100">
      <div>
        <img
          src="https://source.unsplash.com/featured/240x320"
          class="m-auto w-full h-full object-contain"
        />
      </div>
    </SquareContainer>
  </div>
</template>

<script>
import SquareContainer from "https://codepen.io/blancpanda/pen/abVrdqx.js";

export default {
  components: {
    SquareContainer
  }
};
</script>

<style>
.square-container {
  padding: 8%;
}
</style>