.page-widgets > h1 {
    margin-top: 0;
}

.grid-wrapper {
    width: 100%;
    position: relative;
}

.grid-row {
    position: relative;
    z-index: 50;
    height: 300px;
    width: 100%;
    margin-bottom: 24px;
}

.grid-item {
    position: absolute;
    top: 0;
    width: 32%;
    min-width: 300px;
    padding: 0;
    margin: 0;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 3px 1px #ccc;
    box-shadow: 0 2px 3px 1px #ccc;
    border: 0; /* 1px solid rgba(153,153,153,0.35); */
    border-radius: 0;
}

.grid-item-hide-border{
    background: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.grid-item.empty {
    border: none;
}

.grid-item.h1 {
    height: 300px;
}

.grid-item.h2 {
    height: 624px;
}

.grid-item.h3 {
    height: 948px;
}

.grid-item.h4 {
    height: 1272px;
}

.grid-item.h5 {
    height: 1596px;
}

.grid-item.h6 {
    height: 1920px;
}

.grid-item.h10 {
    height: auto;
    position: relative;
}

.grid-row:has(> div.grid-item.h10) {
    height: auto;
}

.grid-item.w2 {
    width: 65%;
}

.grid-item.w3 {
    width: 98%;
}

.grid-end {
    clear: both;
}

.grid-item.c1 {
    left: 0;
}

.grid-item.c2 {
    left: 32%;
    margin-left: 1%;
}

.grid-item.c3 {
    left: 65%;
    margin-left: 1%;
}

.tempMsg {
    position: absolute;
    top: -15px;
    left: 0;
    margin: 0 auto;
    padding: 1px 5px;
    border: 1px solid red;
    border-radius: 0.25rem;
    background: mistyrose;
    color: red;
}


/** small devices such as tablets (max: 992px) */
/*@media (min-width: 768px) and (max-width: 1200px) {
    .grid-row {
        height: auto !important;
        margin-bottom: 0;
    }
    
    .grid-item {
        position: relative;
        display: inline-block;
        left: 0 !important;
    }
    
    .grid-item.c2,
    .grid-item.c3 {
        margin-left: 0 !important;
    }
    
    .grid-item.w1,
    .grid-item.w2 {
        width: 48% !important;
    }
    
    .grid-item.w3 {
        width: 100% !important;
    }
}*/

/** xs devices such as phones: 768px */
@media (max-width: 992px) {
    .grid-row {
        height: auto !important;
        margin-bottom: 0;
    }
    
    .grid-item {
        position: relative;
        display: block;
        width: 100% !important;
        height: auto !important;
        left: 0 !important;
        margin-bottom: 24px !important;
        min-width: 360px !important;
    }
    
    .grid-item.c2,
    .grid-item.c3 {
        margin-left: 0 !important;
    }

    /* min-width on mobile devices with a small screen is a bad plan
        this must be 100% for the display of "please add a wearables device"
        to be sane in the Wellbeing+Me mobile app on super small displays.
        also make it look pretty by centering
    */
    .mobile-hide .w-Wearables.grid-item {
        min-width: 100% !important;
        
    }
    .mobile-hide .w-Wearables.grid-item h4 {
        text-align: center;
    }
}