.post-it {
    position: absolute;
    height: 50px;
    right: -100px;
    display: flex;
    justify-content: right;
    align-items: center;
    padding: 4px 20px 4px 60px;
    cursor: pointer;
    transition: transform 120ms ease-in;
}

.post-it:hover {
    font-weight: 800;
}

.post-it--color-1 {
    background-color: #ff32b2;
}

.post-it--color-2 {
    background-color: #f1f58f;
}

.post-it--color-3 {
    background-color: #74ed4b;
}

.post-it--color-4 {
    background-color: #ffa930;
}

.post-it--color-5 {
    background-color: #a9edf1;
}

.post-it--active {
    z-index: 2;
}

.post-it__1 {
    top: 10%;
    transform: rotate(2deg);
}

.post-it__2 {
    top: 25%;
    transform: rotate(-5deg);
}

.post-it__3 {
    top: 40%;
    transform: rotate(6deg);
}

.post-it__4 {
    top: 55%;
    transform: rotate(4deg);
}

.post-it__5 {
    top: 70%;
    transform: rotate(5deg);
}

@media (max-width: 961px) {
    .post-it {
        font-size: 14px;
        height: 30px;
        z-index: 10;
        right: auto;
    }

    .post-it__1 {
        top: calc(100% - 235px);
        left: -50px;
        transform: rotate(2deg);
    }

    .post-it__2 {
        top: calc(100% - 190px);
        left: -40px;
        transform: rotate(-3deg);
    }

    .post-it__3 {
        top: calc(100% - 140px);
        left: -40px;
        transform: rotate(3deg);
    }

    .post-it__4 {
        top: calc(100% - 94px);
        left: -50px;
        transform: rotate(-5deg);
    }

    .post-it__5 {
        top: calc(100% - 50px);
        left: -40px;
        transform: rotate(2deg);
    }
}