/* ==========================================================================
   Responsive
   ========================================================================== */

/* --- Access controller --- */

@media (max-width: 550px) {
    #access_controller_iot_alarm .specs-list li {
        font-size: 15px;
    }

    #access_controller_iot_alarm .two-column-container {
        padding: 0;
    }
}

@media (max-width: 768px) {
    #access_controller_iot_alarm .two-column-container {
        flex-direction: column-reverse;
    }

    #access_controller_iot_alarm .text-column,
    #access_controller_iot_alarm .image-column {
        width: 100%;
    }
}

/* --- Gallery --- */

@media (max-width: 1200px) {
    .image-thumbnail-gallery {
        width: clamp(360px, 95vw, 900px);
    }

    .image-display {
        min-height: 400px;
    }
}

@media (max-width: 768px) {
    #tracking-album-gallery {
        min-height: 550px;
    }

    .image-thumbnail-gallery {
        min-height: 450px;
        width: 90vw;
    }

    .image-display {
        min-height: 150px !important;
    }

    .amanda_tracking_app {
        width: 15%;
        min-width: 150px;
    }
}

@media (max-width: 680px) {
    .gallery__slide.active {
        background-color: #2e2e2e;
        outline-offset: 3px;
    }

    .gallery__btn {
        flex-grow: 0;
    }

    .thumbnail-gallery {
        user-select: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .gallery__slider {
        max-width: fit-content;
        align-items: center;
        gap: 1em;
    }

    .gallery__slide {
        flex: none;
        aspect-ratio: 1;
        height: 0.625rem;
        border-radius: 50%;
        background-color: #757575;
    }

    .thumbnail {
        opacity: 0;
        display: none;
        aspect-ratio: 16/9;
        height: 8vw;
        position: absolute;
        border-radius: 6px;
        overflow: hidden;
        z-index: 99;
        will-change: transform, opacity;
        transition: opacity 150ms ease-out;
        transform-origin: bottom;
        translate: -50%;
        bottom: 20%;
    }

    .gallery__slide:not(.active):hover .thumbnail {
        opacity: 1;
        display: block;
        animation: galleryShow 250ms ease-out forwards;
        box-shadow: 0 0.375em 0.67em rgba(0, 0, 0, 0.3), 0 0.5em 1.3em rgba(0, 0, 0, 0.2);
    }

    @keyframes galleryShow {
        from {
            opacity: 0;
            transform: scale(0);
        }
        to {
            display: block;
            transform: scale(1);
            opacity: 1;
        }
    }
}

@media (max-width: 500px) {
    #tracking-album-gallery {
        min-height: 100px;
    }

    .image-thumbnail-gallery {
        min-height: 300px;
        width: 95vw;
    }

    .image-display {
        min-height: 100px !important;
    }

    .amanda_tracking_app {
        width: 20%;
        min-width: 120px;
    }
}

@media (max-width: 500px) {
    #tracking-album-gallery {
        padding: 30px 0;
    }

    #tracking-album-gallery h2 {
        font-size: 20px;
    }

    .image-thumbnail-gallery {
        width: 95vw;
        padding: 0.5rem;
    }

    .amanda_tracking_app {
        width: 20%;
        min-width: 120px;
    }
}

@media (max-width: 395px) {
    #tracking-album-gallery h2 {
        font-size: 18px;
    }
}

/* --- Slider / features / misc --- */

@media (max-width: 768px) {
    .slider-box {
        min-width: 250px;
    }

    .feature {
        min-width: 250px;
    }

    #main-content .mainContentH2 {
        font-size: 1.5em;
    }

    #app_snapshot_img_amanda {
        border-radius: 10px;
    }

    #client-image img {
        width: 100%;
    }
}

@media (max-width: 500px) {
    #access_controller_iot_alarm a img {
        width: 250px;
    }

    #access_controller_iot_alarm h2 {
        font-size: 20px;
    }

    #object-tracking-and-counting-subsystem h2 {
        font-size: 20px;
    }
}

@media (max-width: 395px) {
    #object-tracking-and-counting-subsystem h2 {
        font-size: 20px;
        margin-top: 50px;
    }

    .slider-box {
        min-width: 150px;
    }

    #client-image {
        padding-right: 15px;
        padding-left: 15px;
    }
}