@charset "utf-8";
/* CSS Document */

.gallery-container {
    max-width: 600px;
    margin: auto;
    text-align: center;
}

.image-frame {
    /* Set a fixed aspect ratio or size for the frame */
    width: 100%;
    height: 400px; /* Adjust height as needed */
    position: relative;
    overflow: hidden; /* Ensures images stay within the frame */
    border: 1px solid #ccc;
}

.gallery-img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Ensures images cover the area nicely */
	position: absolute;
	top: -1px;
	left: -3px;
	display: none; /* Hide all images by default */
	transition: opacity 0.5s ease-in-out;
}

.gallery-img.active {
    display: block; /* Display only the active image */
}

.selector-buttons {
    margin-top: 15px;
}

.dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.6s ease;
}

.dot.active, .dot:hover {
    background-color: #717171;
}