.hero-products-grid-item {
    /* box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.86), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important; */
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: start;
    position: relative;
    /* box-shadow: inset 0.35em 0.35em 0.35em rgba(127,127,127,0.5); */
    z-index: 0;
}

.hero-products-grid-item::after {
    box-shadow: inset 0.35em 0.35em 0.35em rgba(127, 127, 127, 0.5);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.hero-products-grid-item .fullanchor {
    z-index: 5;
    opacity: 1;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    cursor: pointer;
}

.hero-products-grid-item .fullanchor:hover {
    /* backdrop-filter: grayscale(1); */
    backdrop-filter: hue-rotate(30deg);
}

.hero-products-grid-item .gridimagewrapper {
    height: 0;
    width: 100%;
    padding-bottom: 100%;
    position: relative;
    z-index: 0;
}

.hero-products-grid-item .gridimagewrapper .gridimage {
    width: 100%;
    padding: 1em;
    background: linear-gradient(180deg, #0096FF 0%, #FFFFFF 80%);
    position: relative;
    z-index: 0;
}

.hero-products-grid-item .gridscreenshot {
    position: absolute;
    width: 70%;
    left: 20%;
    top: 30%;
    opacity: 0.75;
    z-index: 10;
    cursor: zoom-in;
}

.hero-products-grid-item .gridscreenshot:hover {
    opacity: 1;
    position: absolute;
    transform: scale(1.5, 1.5);
    cursor: zoom-in;
}

.hero-products-grid-item .productgrid-getbutton {
    position: absolute;
    /* bottom: 1em; */
    top: -0.5em;
    right: 0.5em;
    cursor: pointer;
    border-radius: 4px;
    z-index: 8;
    min-width: 1em;
    background: var(--spybot-lightblue);
    border: 1px solid var(--spybot-darkblue);
    color: var(--spybot-lightblue-text-large);
}

.hero-products-grid-item .productgrid-downloadbutton {
    position: absolute;
    /* bottom: 1em; */
    top: -0.5em;
    left: 0.5em;
    cursor: pointer;
    border-radius: 4px;
    z-index: 8;
    min-width: 1em;
    background: var(--spybot-lightblue);
    border: 1px solid var(--spybot-darkblue);
    color: var(--spybot-lightblue-text-large);
}

.hero-products-grid-item .gridtextwrapper {
    text-align: center;
    margin: 0 0.5em;
    z-index: 3;
    position: relative;
}

.hero-products-grid-item .gridtextwrapper .title {
    font-size: 120%;
    font-weight: bold;
    pointer-events: auto;
}

.hero-products-grid-item .gridtextwrapper .subtitle {
    font-size: 100%;
    font-weight: bold;
    pointer-events: auto;
}

.hero-products-grid-item .gridtextwrapper .text {
    font-size: 100%;
    font-weight: normal;
    pointer-events: auto;
}

.hero-products-grid-item .gridbuttonwrapper {
    z-index: 8;
}

.hero-products-grid-item .gridbuttonwrapper button,
.hero-products-grid-item .gridbuttonwrapper a,
.hero-products-grid-item .gridbuttonwrapper .gridlearnmore {
    width: 90%;
    margin-left: 5%;
}

.hero-products-grid-item .gridbuttonwrapper .gridlearnmore {
    text-align: center;
    margin: auto;
}