.root {
  @apply relative grid items-start gap-8 grid-cols-1;

  @screen lg {
    @apply grid-cols-12 pt-10;
  }
}

.productDisplay {
  @apply relative flex px-0 pb-0 relative box-border col-span-1 bg-violet;
  margin-right: -2rem;
  margin-left: -2rem;
  min-height: 400px;

  @screen md {
    min-height: 700px;
  }

  @screen lg {
    @apply mx-0 col-span-7;
    min-height: 100%;
    height: 100%;
  }
}

.squareBg {
  @apply absolute inset-0 bg-violet z-0;
  max-height: 250px;

  @screen md {
    @apply inset-20;
    max-height: 500px;
  }
}

.nameBox {
  @apply absolute top-6 left-10 z-10;

  & .name {
    @apply px-6 py-2 bg-primary text-primary font-bold;
    font-size: 2rem;
    letter-spacing: 0.4px;
  }

  & .price {
    @apply px-6 py-2 pb-4 bg-primary text-primary font-bold inline-block tracking-wide;
  }

  @screen md {
    & .name,
    & .price {
      @apply bg-violet-light text-white;
    }
  }
}

.sidebar {
  @apply flex flex-col col-span-1;

  @screen lg {
    @apply col-span-5;
    padding-top: 5rem;
  }
}

.sliderContainer {
  @apply absolute z-10 inset-0 flex items-center justify-center overflow-x-hidden;
}

.img {
  @apply w-full h-full object-cover;

  @screen md {
    height: 100%;
    margin-top: -2.75rem;
  }

  @screen lg {
    height: 100%;
    margin-top: -8%;
  }
}

.button {
  min-width: 300px;
  text-align: center;
}