/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

.image-buttons__heading {
    margin-bottom: 32px;
}

.image-buttons__heading :last-child {
    margin-bottom: 0;
}

.image-button-flex {
    row-gap: 32px;
}

.image-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100%;
    background: var(--gray);
    border-radius: 20px;
    padding: 32px;
    overflow: hidden;
    position: relative;
}

.image-button__details {
    position: relative;
    z-index: 1;
}

.image-button__details h2 {
    background: -webkit-gradient(linear, left top, right top, from(#793DF0), color-stop(100.2%, #0085CA));
    background: -o-linear-gradient(left, #793DF0 0%, #0085CA 100.2%);
    background: linear-gradient(90deg, #793DF0 0%, #0085CA 100.2%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.image-button--gradient {
    background: -o-linear-gradient(315deg, var(--primary-color) 0%, var(--dark-blue) 50%, var(--blue) 100%);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dark-blue) 50%, var(--blue) 100%);
}

.image-button--gradient .image-button__details h2 {
    background: -webkit-gradient(linear, left top, right top, from(#fff), color-stop(100.2%, #fff));
    background: -o-linear-gradient(left, #fff 0%, #fff 100.2%);
    background: linear-gradient(90deg, #fff 0%, #fff 100.2%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.image-button__image {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
    max-width: calc(100% - 270px);
}

.image-button--gradient .image-button__image {
    position: absolute;
    right: 0;
    top: auto;
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0);
    bottom: 0;
}

.image-button--light-purple {
    background: var(--light-purple);
}

@media (min-width: 768px) {
    .image-button {
        height: 332px;
    }

    .image-button__details {
        width: 260px;
    }
}

@media (min-width: 1367px) {
    .image-button__image {
        max-width: 100%;
    }
}