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

.mobileOnlyInsert_DJSNo,
.tabletOnlyInsert_RuciT,
.desktopOnlyInsert_YvPsv {
    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_MFWZR {
        display: none;
    }

    .screenInsert_Yh8Et {
        display: flex;
    }

    .screenInsertBlock_ab75o {
        display: block;
    }

    .screenHide_kWSsu {
        opacity: 0;
    }

    .screenShow_URVEy {
        opacity: 1;
    }
}

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

    .notMobileInsert_fUJmq {
        display: flex;
    }

    .notMobileInsertBlock_QtsfJ {
        display: block;
    }

    .notMobileHide_FSKT8 {
        opacity: 0;
    }

    .notMobileShow_DRdqC {
        opacity: 1;
    }
}

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

    .mobileInsert_knzvW,
    .mobileOnlyInsert_DJSNo {
        display: flex;
    }

    .mobileInsertBlock_BAsji {
        display: block;
    }

    .mobileHide_6HJlu {
        opacity: 0;
    }

    .mobileShow_VUEBL {
        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_Jhtm5 {
        display: none;
    }

    .tabletInsert_BgOT5,
    .tabletOnlyInsert_RuciT {
        display: flex;
    }

    .tabletInsertBlock_iPoLS {
        display: block;
    }

    .tabletHide_1SeGR {
        opacity: 0;
    }

    .tabletShow_wdH77 {
        opacity: 1;
    }
}

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

    .desktopInsert_yNWJm,
    .desktopOnlyInsert_YvPsv {
        display: flex;
    }

    .desktopInsertBlock_m07-5 {
        display: block;
    }

    .desktopHide_pEat- {
        opacity: 0;
    }

    .desktopShow_wA5rl {
        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_-AXwL {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    --threshold: 30rem;
}

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