/*
 * Responsive fixes for lab/lab.htm.
 * This file is loaded after the shared responsive and drawer styles.
 */
@media screen and (max-width: 1240px) {
    .cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 16px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .cards .card {
        width: auto;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .cards .card section,
    .cards .card picture,
    .cards .card .img {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .cards a:hover {
        transform: none;
    }

    .modaal-wrapper {
        overflow-x: hidden;
    }

    .modaal-content-container {
        max-width: 100%;
        padding: clamp(12px, 3vw, 30px);
        overflow-x: hidden;
    }

    .modaal-content-container .slider {
        width: 70vw !important;
        max-width: 100%;
    }

    .modaal-content-container .slick-list,
    .modaal-content-container .slick-slide {
        overflow: hidden;
    }

    .modaal-content-container .slider img {
        width: 100% !important;
        max-width: 100%;
        height: auto;
    }

    body.modaal-noscroll .menu-toggle {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

@media screen and (max-width: 680px) {
    .cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .modaal-outer-wrapper {
        display: block;
        width: 100%;
        min-height: 100%;
    }

    .modaal-inner-wrapper {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        min-height: 100%;
        padding: 64px 10px 14px;
        box-sizing: border-box;
    }

    .modaal-container {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        min-width: 0;
        margin: 0 auto;
        overflow: hidden;
    }

    .modaal-content-container {
        width: 100%;
        max-width: 100%;
        padding: 6px;
        box-sizing: border-box;
    }

    .modaal-content-container .slider {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
    }

    .modaal-content-container .slick-list {
        width: 100%;
        max-width: 100%;
    }

    .modaal-content-container .slick-track {
        display: block !important;
    }

    .modaal-content-container .slick-slide picture {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .modaal-wrapper.lab-modal-loading .modaal-container {
        visibility: hidden;
    }

    .modaal-content-container .slick-prev,
    .modaal-content-container .slick-next {
        display: none !important;
    }

    .modaal-close {
        top: 7px;
        right: 7px;
        width: 46px;
        height: 46px;
        z-index: 1;
    }

    .modaal-close::before,
    .modaal-close::after {
        top: 12px;
        left: 21px;
    }
}