/* parent must have position: relative/absolute/fixed */

.flashcard {
    background-image: linear-gradient(135deg, var(--beep-white), var(--beep-white) 87.6%, var(--beep-turquoise) 88%, var(--beep-turquoise) 100%);
    border-radius: 15px;
    max-width: 432px;
    padding: 15px;
    position: absolute;
}
.flashcard.duplicate {
    opacity: 0;
    transition: opacity var(--transition-duration) ease;
    z-index: 100;
}
.flashcard.duplicate:not(:nth-child(8)):hover {
    opacity: 1;
    z-index: 101;
}

.flashcard .wrapper {
    border: 3px solid var(--beep-green);
    border-radius: 13px;
    font-weight: bold;
    padding: 26px 52px;
    text-align: center;
}

.flashcard header {
    color: var(--beep-green);
    font-size: 30px;
    margin-bottom: 20px;
}

.flashcard:nth-child(1),
.flashcard:nth-child(2) {
    right: -80px; top: 140px;
    transform: rotate(6deg);
}

.flashcard:nth-child(3),
.flashcard:nth-child(4) {
    right: 140px; top: 240px;
    transform: rotate(7deg);
}

.flashcard:nth-child(5),
.flashcard:nth-child(6) {
    right: 0; top: -140px;
    transform: rotate(8deg);
}

.flashcard:nth-child(7),
.flashcard:nth-child(8) {
    right: 40px; top: 20px;
    transform: rotate(-3deg);
}

@media (max-width: 768px) {
    .flashcard {
        max-width: 80%;
        position: absolute;
        z-index: 10;
    }
    .flashcard.duplicate {
        display: none;
    }
    .flashcard .wrapper {
        padding: 26px;
    }
    .flashcard header {
        font-size: 20px;
        margin-bottom: 0;
    }
    .flashcard a {
        display: none;
    }
    .flashcard:nth-child(1),
    .flashcard:nth-child(2) {
        right: var(--container-padding-right); top: calc(-1 * var(--padding-top) - 30px);
        transform: rotate(6deg);
    }
    .flashcard:nth-child(3),
    .flashcard:nth-child(4) {
        left: var(--container-padding-right); right: unset; top: calc(-1 * var(--padding-top) + 100px);
        transform: rotate(-7deg);
    }
}