/* Side images styling for responsive design */
body {
    position: relative; /* Ensures positioning context for fixed elements */
    padding-left: 10%; /* Space for the left image for screens wider than 768px */
    padding-right: 10%; /* Space for the right image for screens wider than 768px */
}

.side-image-left, .side-image-right {
    position: fixed; /* Fix position relative to the viewport */
    top: 0; /* Align to the top */
    bottom: 0; /* Stretch to bottom */
    width: 10%; /* Width for screens wider than 768px */
    background-size: cover; /* Ensure full coverage */
    background-position: center; /* Center the background image */
    background-repeat: repeat-y; /* Repeat vertically to fill the space */
}

.side-image-left {
    left: 0; /* Align to the left side */
    background-image: url('img/left.jpg'); /* Path to left side image */
}

.side-image-right {
    right: 0; /* Align to the right side */
    background-image: url('img/right.jpg'); /* Path to right side image */
}

@media (max-width: 768px) {
    body {
        padding-left: 0; /* Remove left padding for screens ≤ 768px */
        padding-right: 0; /* Remove right padding for screens ≤ 768px */
    }
    
    .site-wrapper {
        margin-left: 5%; /* Add margin to avoid overlap by the left image */
        margin-right: 5%; /* Add margin to avoid overlap by the right image */
    }
    
    .side-image-left, .side-image-right {
        width: 5%; /* Reduce width to 5% on smaller screens to minimize intrusion */
    }
}