/* === Custom Block Styling === */
.fadingTilesBlock{
    padding-top: var(--CB-padding-top);
    padding-right: var(--CB-padding-right);
    padding-bottom: var(--CB-padding-bottom);
    padding-left: var(--CB-padding-left);
    margin-top: var(--CB-margin-top);
    margin-bottom: var(--CB-margin-bottom);
    height: 100%;
}


.fadingTiles__tileWrapper{
    background-color: transparent;
    padding: 32px;
    border: solid 2px var(--FC-secondary-color);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: crosshair;
    transition: var(--FC-default-transition);
}

.fadingTiles__topFade{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.fadingTiles__topFade,
.fadingTiles__bottomFade {
    transition: var(--FC-default-transition);
}

.fadingTiles__topFade.faded{
    opacity: 0;
    transition: var(--FC-default-transition);
}

.fadingTiles__bottomFade{
    opacity: 0;
}

.fadingTiles__bottomFade.show{
    opacity: 1;
    transition: var(--FC-default-transition);
}

.fadingTiles__copy, .fadingTiles__title{
    text-align: center;
}

.fadingTiles__copy{
    margin-bottom: 0px;
}

.fadingTiles__title{
    margin-bottom: 0px;
}

@media screen and (max-width: 1199.98px){
    .fadingTiles__tileWrapper{
        padding: 16px;
    }
}


@media screen and (max-width: 767px){
    .fadingTiles__tileWrapper{
        min-height: 100px;
    }
}