:root{
    /* Using eh- here as a name space to keep from inadvertently
        interfering with anything in a :root section of any other css file. */
    /*--eh-max-width: 1800px;*/
    --eh-image-width: 100px;
    --eh-image-height: 100px;
    --eh-image-radius: 40px;
    --eh-image-margin: 4rem;                   /* Space around the images. */
    --eh-image-border: 1px solid black;        /* Default image border. */
    --eh-image-background-color: transparent;
    --eh-image-hover-border: 8px solid blue;
    --eh-image-hover-opacity: 0.8;

    --eh-caption-position-x: right;            /* Left justifies without this. Values: left, right, center. */
    --eh-caption-position-y: end;              /* Top (start) justifies without this. Values: start, end, center, outside. */

    --eh-caption-font-size: xx-large;
    --eh-caption-font-style: normal;
    --eh-caption-font-weight: light;
    --eh-caption-font-color: black;
}


*{
    /* Quick CSS Reset.
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    font-weight: 400;
     */
}


.slider__outer{
    background-color: transparent;
    /*background-color: lightgreen;   /* For testing and trouble shooting. */
    display: inline-block;
    /*
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    */
    height: auto;
    width: 100%;
    /*max-width: var(--eh-max-width);*/
    overflow: hidden ;
    cursor: grab;
}


.slider__inner{
    background-color: transparent;
    /*background-color: blueviolet;*/
    width: 400%;
    height: 100%;                          /* If this is set to auto then the whole page scrolls with the slider. */
    display: flex;
    gap: var(--eh-image-margin);              /* Default space in between images. */
    padding: var(--eh-image-margin);          /* Default space around outside of images and slider edge. */
}


.panel__outer{
    background-color: var(--eh-image-background-color);
    /* background-color: lightcoral; */
    /*
    text-align: center;
    align-content: center;
    */
    position: relative;
    /*flex: 1;*/
    border: var(--eh-image-border);  /* Default image border. */
    /*
    height: 120px;              /* Default image heigt.
    width: 120px;               /* Default image width.
    */
    height: var(--eh-image-height);
    width: var(--eh-image-width);
    user-select: none;
    border-radius: var(--eh-image-radius); /* Needs to match the image radius. */

}


/* TODO: on hover, the actual radius applied to the image itself will be different than
    the .panel_outer when by the thickness of the hover border. */
/* TODO: Also, the opacity affects the border which is not intended or ideal. (but doesn't work at all the panel__image:hover)
*/
.panel__outer:hover {
    opacity: var(--eh-image-hover-opacity);                /* This is applied to the border too. */
    /*border: 0; */
    /*border: 8px solid blue;   /* Border on hover. --eh- THIS STOPS WORKING WHEN SETTING THE .panel__outer BORDER THROUGH JS. */
    /* box-shadow: 3px 3px 5px 5px rgba(200, 200, 200, 1); /* X-offset, Y-offset, Blur Radius, Spread Radius, Color */
    border: var(--eh-image-hover-border);
}

.panel__image{

    background-color: var(--eh-image-background-color);
    /*position: absolute;*/
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    /* Maybe radius minus the hover border size? */
    border-radius: var(--eh-image-radius); /* Needs to match the .panel__outer radius. */
}

.panel__image:hover {
    /*opacity: .5;  this has no effect here. */
}

.panel__text{
    background-color: transparent;
    z-index: 100;               /* Ensure the caption text is over the top of the image. */
    font-size: var(--eh-caption-font-size);
    font-style: var(--eh-caption-font-style);
    font-weight: var(--eh-caption-font-weight);
    color: var(--eh-caption-font-color);
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    display: flex;              /* Niether justify or align work without this. */
    /*
    flex-direction: column;     /* ? */

    justify-content: var(--eh-caption-position-x);
    align-items: var(--eh-caption-position-y);

}