style_static.css

body {
    font-family: Arial, sans-serif;
    text-align: center;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 25px; /* Larger gap between setups */
    padding: 10px;
}

.interactive-container {
    width: 75%; /* Full width of the webpage */
    max-width: none; /* Remove the max-width constraint */
    margin: 0 auto; /* Center the container */
    height: 300px; /* Increased height for better visibility */
}

.image-container {
    display: flex;
    justify-content: center;
    gap: 10px; /* Smaller gap between images of the same setup */
    margin-top: 10px; /* Reduced vertical spacing */
}

.image-container img {
    border: 1px solid #ccc;
    width: 192px; /* Reduced display size */
    height: 192px; /* Reduced display size */
    object-fit: contain; /* Ensure the full image is visible */
}

.slider-container {
    margin-top: 10px; /* Reduced vertical spacing */
}

.slider-label {
    font-size: 14px; /* Slightly smaller font for slider labels */
}

.slider {
    width: 300px;
}