/* ==========================================================================
   Updated Darkfull.css for Sleek 42:6 Ratio
   ========================================================================== */

#slidercontainer {
    position: relative;
    width: 100% !important;
    overflow: hidden;
    line-height: 0; /* Removes extra spacing below the image */
}

.swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
    width: 100%;
}

.swipe-wrap {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.swipe-wrap > div {
    float: left;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* 1. Image handling - Updated to fill the sleeker 42:6 box */
.swipe-content-bg {
    width: 100% !important;
    height: 100% !important; 
    display: block;
    position: relative; 
    /* 'cover' is necessary when the box is slimmer than the image */
    object-fit: contain !important; 
    object-position: center center;
}

/* 2. Item Container - Reduced vertical footprint to 42:6 */
.swipe-item {
    position: relative;
    width: 100%;
    height: auto !important;
    /* This ratio controls the vertical space on desktop */
    aspect-ratio: 42 / 6 !important; 
    background: #000;
}

/* 3. Hide Text Overlay */
.swipe-content {
    display: none !important;
}

/* 4. Arrows Navigation */
.swipeleft, .swiperight {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    z-index: 10;
    width: 40px;
    height: 40px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 250ms linear;
    cursor: pointer;
}

.swipeleft { left: 10px; }
.swiperight { right: 10px; }

#slidercontainer:hover .swiperight, 
#slidercontainer:hover .swipeleft {
    opacity: 1;
}

.swipeleft img, .swiperight img {
    width: 25px;
    filter: invert(100%);
}

/* 5. Mobile Adjustments - Retaining 42:10 for better visibility */
@media(max-width:768px) {
    .swiperight, .swipeleft {
        display: none; 
    }
    
    #slidercontainer {
        width: 100% !important;
        margin: 0 !important;
    }

    .swipe-item {
        aspect-ratio: 42 / 10 !important; 
    }
}

/* Animations */
.fadeInMe {
    animation: fadeIn 300ms 400ms linear forwards;
}

@keyframes fadeIn {
    from { opacity: 0 }
    to { opacity: 1 }
}