@import "style.css";

/* Portfolio */
/* Project Grid */

.projectile {
  width: 70%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3rem;
}

.protile {
  height: 12rem;
  width: 12rem;
  background-position: center;
  background-size: cover;
  border-radius: 0.2rem;
}

#tpgt {
  background-image: url(./images/tpgt/thumbnail.svg);
}

#tpgt:hover {
  background-image: url(./images/tpgt/rothumbnail.svg);
}

#rizq {
  background-image: url(./images/rizq/thumbnail.svg);
}

#rizq:hover {
  background-image: url(./images/rizq/rothumbnail.svg);
}

#gallery39k {
  background-image: url(./images/gallery39k/g39kthumbnail.png);
}

#gallery39k:hover {
  background-image: url(./images/gallery39k/g39krothumbnail.png);
}

#liberate {
  background-image: url(./images/liberate/libthumbnail.png);
}

#liberate:hover {
  background-image: url(./images/liberate/librothumbnail.png);
}

#coconutoil {
  background-image: url(./images/coconutoil/coconutoilthumbnail.png);
}

#coconutoil:hover {
  background-image: url(./images/coconutoil/coconutoilrothumbnail.png);
}

#hkb {
  background-image: url(./images/hkb/hkbthumbnail.png);
}

#hkb:hover {
  background-image: url(./images/hkb/hkbrothumbnail.png);
}

#raibeauty {
  background-image: url(./images/raibeauty/raiskinthumbnail.png);
}

#raibeauty:hover {
  background-image: url(./images/raibeauty/raiskinrothumbnail.png);
}

#samsung {
  background-image: url(./images/samsung/samsungthumbnail.png);
}

#samsung:hover {
  background-image: url(./images/samsung/samsungrothumbnail.png);
}

#qg {
  background-image: url(./images/quettag/thumbnail@2x.png);
}

#qg:hover {
  background-image: url(./images/quettag/rothumbnail@2x.png);
}

#flowweb {
  background-image: url(./images/flowweb/flowwebthumbnail.png);
}

#flowweb:hover {
  background-image: url(./images/flowweb/flowwebrothumbnail.png);
}

#jubilee {
  background-image: url(./images/jubilee/jubileethumbnail.png);
}

#jubilee:hover {
  background-image: url(./images/jubilee/jubileerothumbnail.png);
}

#julke {
  background-image: url(./images/julke/julkethumbnail.png);
}

#julke:hover {
  background-image: url(./images/julke/julkerothumbnail.png);
}

#discover {
  background-image: url(./images/discover/discoverthumbnail.png);
}

#discover:hover {
  background-image: url(./images/discover/discoverrothumbnail.png);
}

#butterscotch {
  background-image: url(./images/butterscotch/butterscotchthumbnail.png);
}

#butterscotch:hover {
  background-image: url(./images/butterscotch/butterscotchrothumbnail.png);
}

#opulence {
  background-image: url(./images/opulence/thumbnail.png);
}

#opulence:hover {
  background-image: url(./images/opulence/rothumbnail.png);
}

#cabin {
  background-image: url(./images/cabin/cabinthumbnail.png);
}

#cabin:hover {
  background-image: url(./images/cabin/cabinrothumbnail.png);
}

#babybook {
  background-image: url(./images/babybook/babybookthumbnail.png);
}

#babybook:hover {
  background-image: url(./images/babybook/babybookrothumbnail.png);
}