@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap');

body {
    font-family: 'Manrope', sans-serif;
}

#puzzle {
    aspect-ratio: 1 / 1;
    max-width: 600px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0.375rem;
    position: relative;
}

.piece {
    height: 164px;
    width: 164px;
    aspect-ratio: 1 / 1;
    touch-action: none;
}

.piece-inner {
    width: 100%;
    height: 100%;
    border-radius: 0.375rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.piece:not(.draggable) {
    cursor: default !important;
}

.home-page .bg-1 {
    background-image: url("../images/puzzle/pic-5-0.png");
}

.home-page .bg-2 {
    background-image: url("../images/puzzle/pic-3-0.png");
}

.home-page .bg-3 {
    background-image: url("../images/puzzle/pic-2-0.png");
}

.home-page .bg-4 {
    background-image: url("../images/puzzle/pic-8-0.png");
}

.home-page .bg-5 {
    background-image: url("../images/puzzle/pic-9-0.png");
}

.home-page .bg-6 {
    background-image: url("../images/puzzle/pic-4-0.png");
}

.home-page .bg-7 {
    background-image: url("../images/puzzle/pic-6-0.png");
}

.home-page .bg-8 {
    background-image: url("../images/puzzle/pic-7-0.png");
}