.image-bullet {
    width: 100%;
    height: auto;
    position: relative;
    border-radius: 0.5rem;
    --top: 0%;
    --left: 0%;
    overflow: hidden;
}

.image-bullet img {
    width: 100%;
    height: 100%;
}

.image-bullet .bullet {
    position: absolute;
    transform: translate(-50%, -50%);
    left: var(--left);
    top: var(--top);
    width: 4rem;
    height: 4rem;
    border-radius: 100%;
    background: var(--secondary);
    display: block;
    box-shadow: rgba(0, 0, 0, 0.6) 0 5px 20px;

    &:before, &:after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 2px;
        width: 1.5rem;
        background: white;
    }
    &:after {
        transform: translate(-50%, -50%) rotate(90deg);
    }
}

@media (max-width: 728px) {
    .image-bullet .bullet {
        width: 2.5rem;
        height: 2.5rem;
        &:before, &:after {
            width: 1rem;
        }
    }
}