/* Responsivity utils */

/* Mobile - less than 700px */
/* Tablet - between 701px to 1024px */
/* Desktop - over 1025px */

.mobileOnlyInsert_9W9Zl,
.tabletOnlyInsert_aHzf-,
.desktopOnlyInsert_Lv9zH {
    display: none;
}

/* 
 * Targets any screen size.
 * 
 * For example, style={[screenRemove, desktopFlex]}
 * will show the element on desktop but not on tablet 
 * or mobile.
 */
@media screen {
    .screenRemove_u4sBx {
        display: none;
    }

    .screenInsert_2fPVC {
        display: flex;
    }

    .screenInsertBlock_-lQvQ {
        display: block;
    }

    .screenHide_RGVMR {
        opacity: 0;
    }

    .screenShow_s6Yea {
        opacity: 1;
    }
}

/*
 * notMobile targets any device bigger than 
 * mobile (tablet, desktop)
 */
@media screen and (min-width: 701px) {
    .notMobileRemove_Zj-i0 {
        display: none;
    }

    .notMobileInsert_ueRCy {
        display: flex;
    }

    .notMobileInsertBlock_GC8Gb {
        display: block;
    }

    .notMobileHide_3kYWX {
        opacity: 0;
    }

    .notMobileShow_2LMZ3 {
        opacity: 1;
    }
}

/*
 * Targets Mobile
 * 
 * Includes special case .mobileOnlyInsert which
 * will display: none on all but mobile devices.
 */
@media screen and (max-width: 700px) {
    .mobileRemove_6H9PI {
        display: none;
    }

    .mobileInsert_RUwJY,
    .mobileOnlyInsert_9W9Zl {
        display: flex;
    }

    .mobileInsertBlock_MLJJe {
        display: block;
    }

    .mobileHide_r1sXQ {
        opacity: 0;
    }

    .mobileShow_TeFrL {
        opacity: 1;
    }
}

/*
 * Targets Tablet
 *
 * Includes special case .tabletOnlyInsert which
 * will display: none on all but tablet devices.
 */
@media screen and (min-width: 701px) and (max-width: 1024px) {
    .tabletRemove_yTFbe {
        display: none;
    }

    .tabletInsert_bD59n,
    .tabletOnlyInsert_aHzf- {
        display: flex;
    }

    .tabletInsertBlock_zG-Rk {
        display: block;
    }

    .tabletHide_1qAfe {
        opacity: 0;
    }

    .tabletShow_eoLfU {
        opacity: 1;
    }
}

/*
 * Targets Desktop
 *
 * Includes special case .desktopOnlyInsert which
 * will display: none on all but desktop devices.
 */
@media screen and (min-width: 1025px) {
    .desktopRemove_7LyCp {
        display: none;
    }

    .desktopInsert_W1VyR,
    .desktopOnlyInsert_Lv9zH {
        display: flex;
    }

    .desktopInsertBlock_nvRa4 {
        display: block;
    }

    .desktopHide_kzKHk {
        opacity: 0;
    }

    .desktopShow_pmscC {
        opacity: 1;
    }
}

/**
 * Switcher is a layout mechanism that uses flex-basis
 * to switch between row and column layouts depending on amount 
 * of space.
 * https://every-layout.dev/layouts/switcher/
 */
.switcher_NlVFC {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    --threshold: 30rem;
}

.switcher_NlVFC > * {
    flex-grow: 1;
    flex-basis: calc((var(--threshold) - 100%) * 999);
}