.overview-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--anresis-color-white-background);
    border-radius: var(--overview-card-radius);

    .overview-card-image {
        height: 210px;
        background-color: var(--overview-card-image-background-color);
        display: flex;
        align-items: center;
        justify-content: center;
        border-start-start-radius: var(--overview-card-radius);
        border-start-end-radius: var(--overview-card-radius);

        > img {
            inline-size: 170px;
            block-size: 170px;
            object-fit: contain;
            filter: var(--overview-card-icon-filter);
        }

        @media screen and (max-width: 767px) {
            height: 130px;

            > img {
                inline-size: 100px;
                block-size: 100px;
            }
        }
    }

    .overview-card-content {
        padding: var(--anresis-spacing-4);
        padding-inline-end: var(--anresis-spacing-10);
        position: relative;
        background-color: var(--anresis-color-white-background);
        flex-grow: 1;
        border-end-start-radius: var(--overview-card-radius);
        border-end-end-radius: var(--overview-card-radius);
    }

    .overview-card-icon {
        height: 32px;
        width: 32px;
        object-fit: contain;
        position: absolute;
        inset-block-end: var(--anresis-spacing-4);
        inset-inline-end: var(--anresis-spacing-4);
        filter: var(--anresis-color-text-filter);
    }

    .overview-card-title {
        font: var(--anresis-font-overview-card-title);
        color: var(--anresis-color-text);
    }

    &:hover {
        .overview-card-image {
            background-color: var(--overview-card-image-hover-background-color);
        }

        .overview-card-icon {
            filter: var(--anresis-color-grey-7-filter);
        }
    }
}