/* ===== RESET & BASE ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #d5c5b6;
  font-family: "Playfair Display", serif;
  color: #382517;
  overflow-x: hidden;
}
.t-records {
  width: 100%;
}
/* ===== T396 ARTBOARD STYLES ===== */
.t396__artboard {
  position: relative;
  width: 100%;
  background-color: #d5c5b6;
  overflow: hidden;
}
.t396__carrier,
.t396__filter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tn-elem {
  position: absolute;
}
.tn-atom {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}
.t-bgimg {
  background-size: cover;
  background-position: center center;
  width: 100%;
}
/* анимации */
@keyframes t-sbs-rotate-left {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes t-sbs-rotate-right {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes t-sbs-slide {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-500px);
  }
  100% {
    transform: translateX(0);
  }
}
.t-animate-zoomin {
  animation: t-zoomin 0.8s ease forwards;
}
@keyframes t-zoomin {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes t-fadeindown {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* responsive */
@media (max-width: 1200px) {
  .tn-elem {
    transform: scale(0.85);
    transform-origin: top center;
  }
}
@media (max-width: 768px) {
  .tn-elem {
    transform: scale(0.8);
  }
}