*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

body {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  overflow: hidden;
  background: linear-gradient(90deg, #ffa585, #ffeda0);
}

.container-sliders {
  width: 100%;
  height: 200px;
  display: flex;
  gap: 1rem;
  justify-content: center;
  transform-style: preserve-3d;
  transform: perspective(1000px);

  @media (width <= 1111px) and (orientation: portrait) {
    zoom: 0.55;
  }

  .card {
    width: 200px;
    height: 100%;
    position: absolute;
    background-size: cover;
    background-position: center;
    transition: 0.4s ease-in-out;

    &.card-n1 {
      background-image: url('assets/t1.avif');
    }
    &.card-n2 {
      background-image: url('assets/t2.avif');
    }
    &.card-n3 {
      background-image: url('assets/t3.avif');
    }
    &.card-n4 {
      background-image: url('assets/t4.avif');
    }
    &.card-n5 {
      background-image: url('assets/t5.avif');
    }
    &.card-n6 {
      background-image: url('assets/t6.avif');
    }
    &.card-n7 {
      background-image: url('assets/t7.avif');
    }

    &:nth-child(1) {
      z-index: -1;
      transform: translateX(-88%) rotateY(20deg) scale(0.8);
    }
    &:nth-child(2) {
      z-index: 2;
      transform: translateX(-88%) rotateY(20deg) scale(0.8);
    }
    &:nth-child(3) {
      z-index: 3;
      transform: translateX(-50%) rotateY(10deg) scale(0.9);
    }
    &:nth-child(4) {
      z-index: 4;
      transform: scale(1);
    }
    &:nth-child(5) {
      z-index: 3;
      transform: translateX(50%) rotateY(-10deg) scale(0.9);
    }
    &:nth-child(6) {
      z-index: 2;
      transform: translateX(88%) rotateY(-20deg) scale(0.8);
    }
    &:nth-child(7) {
      z-index: -1;
      transform: translateX(88%) rotateY(-20deg) scale(0.8);
    }
  }
}