//
// _pin-board.scss
//

.pin-board {
    gap: 30px;
    padding: 30px;
    justify-content: center;

    .pin-board-item {
        display: block;
        position: relative;
        height: 210px;
        width: 210px;
        padding: 1em;
        box-shadow: 4px 3px 7px rgba($dark, 0.1);
        transition: transform 0.15s linear;

        &:nth-of-type(even) {
            transform: rotate(4deg);
        }

        &:hover {
            transform: scale(1.1);
            position: relative;
            z-index: 5
        }
    }

    a.pin-board-delete {
        position: absolute;
        inset-inline-end: 10px;
        bottom: 10px;
        color: inherit;
    }
}

.pin-board-add {
    box-shadow: none !important;
}