html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

/* Titan Container */
.titan {
    display: flex;       /* Using flexbox for the grid layout */
    flex-wrap: wrap;     /* Allow wrapping for responsiveness */
    max-width: 1300px;  /* Set max width for the grid */
    margin: 0 auto;     /* Center the grid */
}

/* Nymph Columns */
.nymph {
    flex: 1 0 33.3%;  /* Grow and shrink as needed, base width 33.3% */
    margin-bottom: 16px; /* Space between columns */
    padding: 0 8px;     /* Side padding */
}

/* Mobile responsiveness */
@media screen and (max-width: 650px) {
    .nymph {
        flex: 1 0 100%;  /* Stack columns on small screens */
    }
}

/* Satyr Card */
.satyr {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* Image Carousel */
.image-carousel {
    overflow: hidden;        /* Hide overflow for carousel */
    position: relative;      /* Relatively positioned parent for absolute children */
    height: 300px;          /* Fixed height for carousel */
}

/* Carousel Images */
.carousel-img {
    width: 100%;            /* Full width for images */
    height: auto;           /* Maintain aspect ratio */
    position: absolute;      /* Stack images at the same location */
    transition: opacity 0.5s ease;
    opacity: 0;             /* Start hidden */
}

/* Show active image */
.carousel-img.active {
    opacity: 1;             /* Show active image */
}

/* Carousel Controls */
.carousel-controls {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
}

.carousel-control {
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    cursor: pointer;
    padding: 10px;
}

/* Halcyon Content */
.halcyon {
    padding: 10px 16px;   /* Padding for text content */
}

.halcyon::after {
    content: "";
    clear: both;          /* Clear floats */
    display: table;
}

/* Apollo Text Color */
.apollo {
    color: grey;          /* Color for specific text class */
}