/*
Block Name: Grid with modals
Description: A simple full width image block.
*/

section.block-grid-with-modals .col { position: relative; }
section.block-grid-with-modals .content:hover { cursor: pointer;  }
section.block-grid-with-modals .content { padding: 10rem 2rem; }
section.block-grid-with-modals .content h3, section.block-grid-with-modals .content h4 { color: #fff; }
section.block-grid-with-modals .grid-image img { width: 100%; height: auto; }
section.block-grid-with-modals .modal-content img { width: 100%; height: auto; }
section.block-grid-with-modals .modal-content p { }
.custom-popup { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; z-index: 9999999; background: var(--brand-1); }
.custom-popup-content { background-color: #fff; width: 70%; max-width: 100rem; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2rem; }
.custom-close { color: #aaa;
    font-size: 2.8rem;
    font-weight: bold;
    position: absolute;
    top: 0;
    right: 0;
    background: var(--brand-2);
    padding: 1rem;
    line-height: 1;
    color: #fff;
    border-radius: 0 0 0 1rem; }
.custom-close:hover, .custom-close:focus { background: var(--brand-3); text-decoration: none; cursor: pointer; }
#custom-popup-body { display: grid; grid-gap: 4rem; grid-template-columns: 1fr 2fr; }

@media (max-width: 76.7rem) {
    .col.has-bg-img:before { content: ""; display: block; padding-top: 100%; background-image: inherit; background-size: cover; background-position: center center; background-repeat: no-repeat;  }
}