.interactive-grid {
    display: flex;
    gap:0;
    align-items: flex-start;
}

.interactive-grid.grid-open {
    align-items: flex-start;
}

.interactive-grid .content-grid-item {
    transition: flex-basis .6s ease-in-out, transform .3s ease-in-out;
}


.interactive-grid-2 .content-grid-item {
    flex-basis: 49.5%;
}

.interactive-grid-3 .content-grid-item {
    flex-basis: 32.5%;
}

.interactive-grid-4 .content-grid-item {
    flex-basis: 24.65%;
}

.content-grid-item {
    border: 2px solid var(--wp--preset--color--white);
    cursor: pointer;
    background-color: var(--secondary-lighter);
}

.content-grid-item.item-show {
    cursor: default;
}

.content-grid-item-image {
    aspect-ratio: 4/3;
}

.content-grid-item-image img {
    display: block;
    width: 100%;
    object-fit: cover;
}

.content-grid-item-inner {
    padding: 1rem;
    position: relative;
}

.content-grid-item-topline {
    font-size: var(--wp--preset--font-size--text-s);
    margin-bottom:.25rem;
    margin-top:0;
    transition: font-size .5s ease-in-out;
}

h3.content-grid-item-headline {
    font-size: var(--wp--preset--font-size--text-heading-5);
    margin:0 !important;
    transition: font-size .5s ease-in-out;
}

.content-grid-item-more, .close-grid-item {
    display: none;
    opacity: 0;
    animation: fadeIn .4s ease-in-out .5s forwards;
}

.content-grid-item:not(.item-show):not(.item-hide):hover .open-grid-item, .content-grid-item:not(.item-show):not(.item-hide):focus-visible .open-grid-item {
    opacity: 1;
    height: auto;
}

.content-grid-item-more p {
    margin-block-start: 1rem !important;
    margin-block-end: 1rem !important;
}

.content-grid-item-more strong {
    font-family: var(--wp--preset--font-family--novel);
}


.close-grid-item, .open-grid-item {
    background:none;
    border:none;
    padding:0;
    margin:0;
    font-family: var(--wp--preset--font-family--mdio);
    color: var(--wp--preset--color--primary);
    cursor: pointer;

}

.close-grid-item {
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: var(--wp--preset--font-size--text-s);
}

.close-grid-item::after {
    content:'';
    display:inline-block;
    width: 1rem;
    height: 1rem;
    margin-left: .75rem;
    transition: all .3s ease-in-out;
    background-repeat: no-repeat;
    background-size: contain;
    background-image:url(../../assets/img/close.svg);
}

.open-grid-item {
    margin-top: .5rem;
}

.open-grid-item::before {
    content:'';
    display:inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: .75rem;
    transition: all .3s ease-in-out;
    background-repeat: no-repeat;
    background-size: contain;
    background-image:url(../../assets/img/info.svg);
}

.close-grid-item:hover, .close-grid-item:focus-visible {
    color: var(--wp--custom--color--hover);
}

.close-grid-item:hover::after, .close-grid-item:focus-visible::after {
		transform: rotate(180deg);
}

.interactive-grid .content-grid-item.item-show {
    flex-basis: 66%;
}

.interactive-grid-2 .content-grid-item.item-hide {
    flex-basis: 33%;

}

.interactive-grid-3 .content-grid-item.item-hide {
    flex-basis: 16.5%;

}

.interactive-grid-4 .content-grid-item.item-hide {
    flex-basis: 11%;

}

.item-show .content-grid-item-image {
    aspect-ratio: 21/9;
}

.item-show .content-grid-item-more, .item-show .close-grid-item {
    display: block;
}

.item-show h3.content-grid-item-headline {
    margin-bottom: 2rem !important;
}

.item-hide {
    background-color: transparent;
}

.item-hide .open-grid-item, .item-show .open-grid-item {
    opacity: 0;
    height: 0;
    transition: all .4s ease-in-out;
}


@media(min-width: 768px) {

    .item-hide .content-grid-item-topline {
        font-size:.4rem;
    }

    .item-hide .content-grid-item-headline {
        font-size: .6rem;
    }
}

@media(max-width: 767px) {
    .interactive-grid {
        flex-wrap: wrap;
        row-gap: var(--wp--style--block-gap);
    }
    .interactive-grid .content-grid-item {
        flex-basis: 100%;
    }
    .open-grid-item {
        display:block;
    }
    .interactive-grid .content-grid-item.item-show, .interactive-grid .content-grid-item.item-hide {
        flex-basis: 100%;
    }

    .content-grid-item.item-hide {
        background-color: var(--secondary-lighter);
    }

    .item-show .content-grid-item-topline {
        margin-top: 3rem;
    }

    .item-show .open-grid-item {
        display:none;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (hover: hover) {
    .open-grid-item {
        opacity: 0;
        height: 0;
        transition: all .4s ease-in-out;
    }
    .content-grid-item:not(.item-show):not(.item-hide):hover, .content-grid-item:not(.item-hide):not(.item-show):focus-visible {
        transform:scale(1.05);
        z-index: 10;
    }
}