*
  margin: 0
  padding: 0
  box-sizing: border-box

  &::after, &::before
    margin: 0
    padding: 0
    box-sizing: border-box

html
  font-size: 62.5%

body
  --background-color:hsl(180, 20%, 90%)
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
  min-height: 100vh
  padding: 2rem
  color: hsla(0, 0%, 0%, 0.6)
  background: var(--background-color)
  text-align: center

h1
  font-size: 3.2rem
  padding-top: 2rem

  + p
    font-size: 1.8rem
    padding: 2rem 0 3rem

.main
  display: flex
  flex-wrap: wrap
  justify-content: center
  align-items: center

.wrap
  margin: 2rem
  transform-style: preserve-3d
  transform: perspective(100rem)
  cursor: pointer

.container
  --rX:0
  --rY:0
  --bX:50%
  --bY:80%
  width: 30rem
  height: 36rem
  border: 1px solid var(--background-color)
  border-radius: 1.6rem
  padding: 4rem
  display: flex
  align-items: flex-end
  position: relative
  transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg))
  background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)), url("https://images.unsplash.com/photo-1559113513-d5e09c78b9dd?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9")
  background-position: var(--bX) var(--bY)
  background-size: 40rem auto
  box-shadow: 0 0 3rem 0.5rem hsla(0, 0%, 0%, 0.2)
  transition: transform .6s 1s

  &::before, &::after
    content: ""
    width: 2rem
    height: 2rem
    border: 1px solid #fff
    position: absolute
    z-index: 2
    opacity: .3
    transition: .3s

  &::before
    top: 2rem
    right: 2rem
    border-bottom-width: 0
    border-left-width: 0

  &::after
    bottom: 2rem
    left: 2rem
    border-top-width: 0
    border-right-width: 0

.container--active
  transition: none

.container--portfolio
  filter: hue-rotate(80deg) saturate(140%)

.container--homepage
  filter: hue-rotate(160deg) saturate(140%)

.container--yugen
  filter: hue-rotate(180deg) saturate(40%)

.container--thaldrin
  filter: hue-rotate(180deg) saturate(140%)

.container--kaito
  filter: hue-rotate(180deg) saturate(140%)

.container--yiff
  filter: hue-rotate(180deg) saturate(140%)

.container p
  color: hsla(0, 0%, 100%, 0.6)
  font-size: 2.2rem

.wrap:hover .container
  &::before, &::after
    width: calc(100% - 4rem)
    height: calc(100% - 4rem)