/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/


.block-expand-categories h1,
.block-expand-categories h2,
.block-expand-categories h3 {
    font-family: Playfair Display, serif !important;
}

.block-expand-categories .expand-category {
    --height: 50vh;
    --responsive-height: 60px;
    --hover-flex: 10;
    position: relative;
    background-position: center center;
    background-size: cover;
    border-radius: 20px;
    margin: 10px 0;
    min-height: var(--responsive-height);
    cursor: pointer;
}

    .block-expand-categories .expand-category h4 {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        text-align: center;
        margin: 0;
        transform: translateY(-50%);
    }

/* Larger Device */
@media (min-width: 992px) {

    .block-expand-categories .expand-category {
        height: var(--height);
        flex: 1;
        margin: 0 10px;
        transition: flex 1s ease;
        -webkit-backface-visibility: hidden;
        transform: translate3d(0,0,0);
    }

    .block-expand-categories:not(.on-click) .expand-category:hover,
    .block-expand-categories.on-click .expand-category.active {
        flex: var(--hover-flex);
    }

    .block-expand-categories .expand-category h4 {
        opacity: 1;
        top: auto;
        bottom: 10px;
        transform: none;
        transition: opacity .4s ease;
    }

    .block-expand-categories:hover .expand-category:not(.active):not(:hover) h4,
    .block-expand-categories.on-click .expand-category:not(.active) h4 {
        opacity: 0;
    }
}