image-grid{
    --button-size:55px;
    --swiper-navigation-sides-offset:20px;
    width:100%;
}

image-grid .image-grid-item{
    display:grid;
    grid-template: "stack";
    grid-template-rows: 100%;
    height:100%;
    aspect-ratio:var(--aspect-ratio);
}
image-grid .image-grid-item>div{
    grid-area: stack;
}
image-grid .title{
    color:rgb(var(--color-text));
}
image-grid .subheading{
    color:rgb(var(--color-text));
    margin-bottom:20px;
}

image-grid .image-grid-item-button{
    color:rgb(var(--color-button-text));
    background-color:rgb(var(--color-button-background));
    margin-top: auto;
    max-width:180px;
    width:100%;
}

image-grid .item-textarea{
    padding:60px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align:var(--text-align);
}
image-grid .item-image>*{
    width:100%;
    height:100%;
}

image-grid .swiper-button{
    width:var(--button-size);
    height:var(--button-size);
    background-color: #fff;
    border-radius:5px;
    --svg-color:#000;
}
image-grid .swiper-button svg path{
    stroke:var(--svg-color);
}

image-grid .swiper-button:hover{
    background-color: #000;
    --svg-color:#fff;
}
image-grid .swiper-button.swiper-button-disabled{
    background-color: #fff !important;
    --svg-color:#000 !important;
    pointer-events: auto;
    cursor: no-drop;
    opacity: .5;
}
image-grid .swiper-button::after{
    display: none;
}
@media (max-width: 959px) {
    image-grid{
        --swiper-navigation-sides-offset:10px;
    }
    image-grid .item-textarea{
        padding: 20px;
    }
    image-grid .swiper-control{
        display:none
    }
}