﻿

.beItemContainer[data-itemname="Card"] h2 {
    margin: 3px 0 5px 0;
    font-size: 35px;
}

.beItem[data-itemname="Card"].hasOverlayLink:hover {
    background-color: #F4F7F4;
}


.beContainerBlock.hasPropertyCSSBackgroundColor + .beContainerBlock {
    margin-top: var(--DefaultBlockMarginTopAfterBackgroundColoredBlock, 0);
    padding-top: var(--DefaultBlockPaddingTopAfterBackgroundColoredBlock, 0);
}

.beContainerBlock.hasPropertyCSSBackgroundColor {
    padding-top: var(--DefaultBlockPaddingTopWithinBackgroundColoredBlock, 70px);
    padding-left: 0;
    padding-bottom: var(--DefaultBlockPaddingBottomWithinBackgroundColoredBlock, 70px);
    padding-right: 0;
    margin-left: var(--DefaultBlockMarginLeftWithinBackgroundColoredBlock, 0px);
    margin-right: var(--DefaultBlockMarginRightWithinBackgroundColoredBlock, 0px);
}


[data-columncount="2"] > .beContainerColumn.beCol-2 {
    width: calc((100% / 12 * 3) - var(--column-gap) + (var(--column-gap) / 12 * 3));
}

[data-columncount="2"] > .beContainerColumn.beCol-4 {
    width: calc((100% / 12 * 9) - var(--column-gap) + (var(--column-gap) / 12 * 9));
}


@media screen and (max-width: 1023.9px) {

    .home .hideOnSmartphone {
        display: none;
    }

    .home [data-columncount="2"] > .beContainerColumn.beCol-2,
    .home [data-columncount="2"] > .beContainerColumn.beCol-4,
    .home .itemsNoMargin [data-columncount="2"] > .beContainerColumn.beCol-2,
    .home .itemsNoMargin [data-columncount="2"] > .beContainerColumn.beCol-4 {
        width: 100%;
    }
}