* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-show: #ECF0F6;
  --bg-odd: #F6F8FC;
  --aside: 300px;
  --model-width: 300px;
  /*--model-height: 640px;*/
  --model-height: 87.5vh;
}

@font-face {
  font-family: raleway-l;
  src: url("../assets/fonts/raleway-400.woff2");
}

@font-face {
  font-family: raleway-l;
  src: url("../assets/fonts/raleway-300.woff2");
  font-weight: 300;
}

@font-face {
  font-family: raleway-l;
  src: url("../assets/fonts/raleway-600.woff2");
  font-weight: 600;
}

@font-face {
  font-family: raleway-l;
  src: url("../assets/fonts/raleway-700.woff2");
  font-weight: 700;
}

body {
  font-family: raleway-l, sans-serif;
}

.show {
  background: var(--bg-show);
  height: 100vh;
  width: calc(100vw - var(--aside));
  position: fixed;
}

.layers {
  position: absolute;
  inset: 0;
}

.layers > * {
  width: var(--model-width);
  height: var(--model-height);
  position: absolute;
  left: calc(100vw - var(--aside) - 20vw);
  top: 50%;
  margin-left: calc(var(--model-width) / -2);
  margin-top: calc(var(--model-height) / -2);
  cursor: pointer;
  animation-timeline: scroll();
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-range: 0 300vh;
}

.layers img {
  height: 100%;
}

.layer6 {
  animation-name: animation-6;
  margin-left: -10vw;
  opacity: 1;
}

@keyframes animation-6 {
  to {
    transform: scale(5);
    margin-left: 320vw;
  }
}

.layer5 {
  margin-left: -30vw;
  transform: scale(.8);
  opacity: .85;
  filter: blur(2.5px);
  animation-name: animation-5;
}

@keyframes animation-5 {
  to {
    transform: scale(3.75);
    margin-left: 200vw;
  }
  10%, 100% {
    opacity: 1;
    filter: blur(0px);
  }
}

.layer4 {
  margin-left: -42.5vw;
  transform: scale(.575);
  opacity: .7;
  filter: blur(5px);
  animation-name: animation-4;
}

@keyframes animation-4 {
  to {
    transform: scale(2.75);
    margin-left: 120vw;
  }
  10%, 100% {
    opacity: 1;
    filter: blur(0px);
  }
}

.layer3 {
  margin-left: -52vw;
  transform: scale(.375);
  opacity: .55;
  filter: blur(7.5px);
  animation-name: animation-3;
}

@keyframes animation-3 {
  to {
    transform: scale(1.85);
    margin-left: 65vw;
  }
  35%, 100% {
    opacity: 1;
    filter: blur(0px);
  }
}

.layer2 {
  margin-left: -58vw;
  transform: scale(.25);
  opacity: .3;
  filter: blur(10px);
  animation-name: animation-2;
}

@keyframes animation-2 {
  to {
    transform: scale(1.35);
    margin-left: 25vw;
  }
  55%, 100% {
    opacity: 1;
    filter: blur(0px);
  }
}

.layer1 {
  margin-left: -62vw;
  transform: scale(.15);
  opacity: .1;
  filter: blur(12.5px);
  animation-name: animation-1;
}

@keyframes animation-1 {
  to {
    transform: scale(.85);
    margin-left: -2.5vw;
  }
  65%, 100% {
    opacity: 1;
    filter: blur(0px);
  }
}

.aside {
  background: white;
  width: var(--aside);
  position: absolute;
  right: 0;
  top: 0;
}

.item {
  padding: 30px 0 40px 0;
  text-align: center;
  position: relative;
  font-size: 14px;
  height: 50vh;
}

.item:nth-child(odd) {
  background: var(--bg-odd);
}

.item h3 {
  margin: 0 0 3px 0;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
}

.item .price {
  text-align: left;
  font-weight: 600;
  opacity: .5;
  letter-spacing: -.25px;
}

.item__bottom {
  position: absolute;
  bottom: 20px;
  width: 100%;
  padding: 0 20px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.add {
  font-size: 50px;
  font-weight: 300;
  cursor: pointer;
  padding: 10px;
  line-height: 20px;
  position: relative;
  top: -5px;
}

.item img {
  height: calc(100% - 50px);
  max-width: 150px;
  object-fit: contain;
}

.logo {
  position: fixed;
  bottom: 8vh;
  left: 3.5vw;
  text-transform: uppercase;
  z-index: 10;
}

.logo__text {
  font-weight: 700;
  text-decoration: none;
  color: #333;
  font-size: 20px;
  letter-spacing: 0.5px;
}

.logo p {
  font-size: 12px;
  opacity: 0.6;
}

.collection {
  position: absolute;
  top: 5vh;
  left: 3.5vw;
  max-width: 360px;
  z-index: 10;
}

.collection h2 {
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}

.collection p {
  font-size: 14px;
  line-height: 1.7;
  margin-top: 14px;
  
}

@media (max-width: 991.98px) {
  :root {
    --aside: 240px;
  }
  
  .collection {
    max-width: 200px;
  }
}

@media (max-width: 767.98px) {
  .show {
    display: none;
  }
  
  .aside {
    width: 100%;
  }
}