.infocard-container {
    position: relative;

    .infocard {
        position: absolute;
        min-height: 220px;
        width: 100%;

        border-radius: var(--border-radius-l);
        box-shadow: var(--box-shadow);

        background-color: var(--white);

        /* overflow: hidden; */
        padding: var(--dist-40);

        transition: var(--transition-slow);

        cursor: pointer;
        user-select: none;


        * {
            transition: var(--transition-slow);
        }

        .close-icon{
            position: absolute;
            top: 12px;
            right: 24px;
            font-size: 28px;
            cursor: pointer;

            color: var(--white);

            opacity: 0;
            pointer-events: none;
        }

        &.active {
            background-color: var(--primary);

            *,
            .infocard-headline,
            .infocard-subheadline {
                color: var(--white);
            }

            .infocard-text{
                color: rgba(255, 255, 255, 1);
            }

            .icon-container{
                opacity: 0;
                pointer-events: none;

                transition-delay: 0s;
                transition-duration: 0s;

            }

            .close-icon{
                opacity: 1;
                pointer-events: all;
            }
        }

        .infocard-headline{
            font-size: var(--fs-headline);
            color: var(--blue);
            font-weight: 600;
        }
        .infocard-subheadline{
            font-size: var(--fs-body-l);
            color: var(--half-blue);
            font-weight: 500;
        }
        .infocard-text{
            font-size: var(--fs-body-l);
            color: rgba(255, 255, 255, 0);

            margin: 0;
            margin-top: var(--dist-2);
        }
        .icon-container{
            position: absolute;
            bottom: 0px;
            right: 0px;

            width: 100px;
            height: 100px;

            border-bottom-right-radius: var(--border-radius-l);

            box-shadow: inset 10px 10px 30px 0px rgba(var(--blue-rgb), 0.3);


            transition-delay: 0.25s;

            .icon-mask{
                position: absolute;
                top: -0px;
                left: -0px;

                width: 40px;
                height: 40px;

                background: radial-gradient(circle, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 20px, rgba(255,255,255,1) 20px);
                background-position: 20px 20px;
                background-repeat: no-repeat;

            }
            &:after{
                content: "";
                position: absolute;

                display: block;

                background-color: #fff;

                top: 0px;
                right: 0px;

                height: 20px;
                width: 100px;

                border-bottom-right-radius: 20px;
            }
            &:before{
                content: "";
                position: absolute;


                display: block;
                background-color: #fff;

                left: 0px;
                bottom: 0px;

                height: 100px;
                width: 20px;


                border-bottom-right-radius: 20px;
            }

            .icon {
                position: absolute;

                top: calc(50% + 10px);
                left: calc(50% + 10px);

                transform: translate(-50%, -50%);

                margin: 0 auto;
                font-size: 28px;
                cursor: pointer;

                color: var(--primary);
            }
        }


        .hidden-content {
            height: 0;
            overflow: hidden;

            &.active {
                padding-top: 16px;
            }
        }
    }
}

@media (min-width: 768px) and (max-width: 1100px) {
    .infocard-container {
        .infocard {
            min-height: 260px;
        }
    }
}