/* Base class for the parent to ensure relative positioning */
.relative-parent {
    position: relative;
    margin: 50px; /* Example margin, adjust as needed */
}

/* Class to apply to the image */
.img-extend-outside {
    position: absolute;
    top: -20px;
    left: -20px;
    z-index: 1; /* Ensure it overlaps as needed, adjust according to your layout */
}

/* Media query for screens larger than 768px */
@media (min-width: 768px) {
    .img-extend-outside {
        /* Adjustments for larger screens */
        top: -20px; /* How far up and left you want the image to go */
        left: -20px;
    }
}

/* Media query for screens smaller than 768px */
@media (max-width: 768px) {
    .img-extend-outside {
        /* Reset positions for smaller screens */
        position: static; /* This will make the image follow the normal document flow */
        margin: 0; /* Adjust if you want some margin */
    }
}