.pso-postbox__backgrounds-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    gap: var(--G2);
    margin-bottom: calc(-1 * var(--G3));
}

.pso-postbox__backgrounds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
    gap: var(--G1);

    @include mq($from: desktop) {
        gap: var(--G2);
    }
}

.pso-postbox__backgrounds-item {
    position: relative;
    aspect-ratio: 1/1;
    background-position: center ;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: var(--BORDER-RADIUS--MD);
    box-shadow: inset 0 0 0 4px rgba(0,0,0,0);
    cursor: pointer;
    opacity: .65;
    transition: var(--TRANS), var(--TRANS-O);

    span {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%) translateY(-8px);
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid var(--bg);
        opacity: 0;
        transition: var(--TRANS), var(--TRANS-O);
    }

    &:hover {
        opacity: 1;
    }

    &.active {
        box-shadow: inset 0 0 0 4px rgba(0,0,0, .15);
        opacity: 1;

        span {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }
    }
}

.pso-postbox__backgrounds-notice {
    margin: 0;
}