style: changed some units from px to rem and removed fixed width/height

fix devhatt#20

src/components/PetCard/index.js

@@ -0,0 +1,45 @@
+import { Component } from 'pet-dex-utilities';
+import './index.scss';
+
+const events = ['active'];
+
+const html = `
+  <div class="pet-container" data-select="pet-container">
+  <p class="pet-container__title" data-select="pet-title"></p>
+  <img class="pet-container__image" data-select="pet-image" src="" alt="">
+  </div>
+`;
+
+export default function PetCard({ title, imgSrc, imgAlt }) {
+  Component.call(this, { html, events });
+
+  const petContainer = this.selected.get('pet-container');
+
+  petContainer.addEventListener('click', () => {
+    this.toggle();
+    this.active();
+  });
+
+  if (title) this.setTitle(title);
+  if (imgSrc) this.setImgSrc(imgSrc);
+  if (imgAlt) this.setImgAlt(imgAlt);
+}
+
+PetCard.prototype = Object.assign(PetCard.prototype, Component.prototype, {
+  setTitle(text) {
+    this.selected.get('pet-title').textContent = text;
+  },
+  setImgSrc(src) {
+    this.selected.get('pet-image').src = src;
+  },
+  setImgAlt(alt) {
+    this.selected.get('pet-image').alt = alt;
+  },
+  toggle() {
+    const petContainer = this.selected.get('pet-container');
+    petContainer.classList.add('pet-container--active');
+  },
+  active() {
+    this.emit('active');
+  },
+});

src/components/PetCard/index.scss

@@ -0,0 +1,41 @@
+@use '~styles/base.scss';
+
+.pet-container {
+  aspect-ratio: 1/1;
+  overflow: hidden;
+
+  display: flex;
+  flex-direction: column;
+
+  border: 1px solid #eceff2;
+  box-sizing: border-box;
+
+  background-color: #fff;
+  box-shadow: 0 0 0.5rem 0 #0c1a4b0d;
+
+  border-radius: 1.8rem;
+
+  &__image {
+    height: 100%;
+  }
+
+  &__title {
+    font-family: 'Montserrat', sans-serif;
+    text-align: center;
+    font-size: 1.6rem;
+    font-weight: 600;
+    line-height: 1.5;
+
+    margin-top: 2rem;
+  }
+
+  &--active {
+    color: #1b85f3;
+
+    border: 2px solid #1b85f3;
+  }
+
+  &:hover {
+    box-shadow: rgba(100, 100, 111, 0.2) 0 0.2rem 1.5rem 0;
+  }
+}