.mfp-gallery img.mfp-img { padding: 40px 0 !important; } .fl-node- .bewod-hero-gallery { position: relative; width: 100%; height: 80vh; } .fl-node- .bewod-hero-gallery__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; gap: 0; width: 100%; height: 100%; position: relative; } .fl-node- .bewod-hero-gallery--single .bewod-hero-gallery__grid { grid-template-columns: 1fr; grid-template-rows: 1fr; } .fl-node- .bewod-hero-gallery__slot { position: relative; display: block; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; background: #e9e4df; border-radius: 0; overflow: hidden; cursor: pointer; } .fl-node- .bewod-hero-gallery__slot--empty { pointer-events: none; } .fl-node- .bewod-hero-gallery__slot::after { content: ""; position: absolute; inset: 0; z-index: 1; /*background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 30%);*/ background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.3) 100%); pointer-events: none; } .fl-node- .bewod-hero-gallery__main { grid-column: 1; grid-row: 1 / span 2; height: 100%; } .fl-node- .bewod-hero-gallery--single .bewod-hero-gallery__main { grid-column: 1; grid-row: 1; } .fl-node- .bewod-hero-gallery__side-1-wrap, .fl-node- .bewod-hero-gallery__side-2-wrap { position: relative; min-height: 0; height: 100%; } .fl-node- .bewod-hero-gallery__side-1, .fl-node- .bewod-hero-gallery__side-2 { height: 100%; } .fl-node- .bewod-hero-gallery__side-1-wrap { grid-column: 2; grid-row: 1; } .fl-node- .bewod-hero-gallery__side-2-wrap { grid-column: 2; grid-row: 2; } .fl-node- .bewod-hero-gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .fl-node- .bewod-hero-gallery__trigger:hover .bewod-hero-gallery__img, .fl-node- .bewod-hero-gallery__trigger:focus-visible .bewod-hero-gallery__img { transform: scale(1.015); } .fl-node- .bewod-hero-gallery__view-btn { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; z-index: 3; margin: 0 1rem 1rem 0; margin: 0 3rem 3.5rem 0; box-shadow: none; } .fl-node- .bewod-hero-gallery__view-icon { display: none; line-height: 0; } .fl-node- .bewod-hero-gallery__view-icon svg { display: block; } .fl-node- .bewod-hero-gallery--single .bewod-hero-gallery__view-btn { grid-column: 1; grid-row: 1; } .fl-node- button.bewod-hero-gallery__slot:hover { box-shadow: none !important; } .fl-node- .bewod-hero-gallery__meta { position: absolute; left: 1.5rem; bottom: 1.5rem; left: 3rem; bottom: 2.5rem; z-index: 2; max-width: min(70%, 640px); color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45); pointer-events: none; } .fl-node- .bewod-hero-gallery__title { margin: 0 0 0.35rem; font-size: 36px; line-height: 1.1; color: inherit; } .fl-node- .bewod-hero-gallery__city { margin: 0; font-size: clamp(1rem, 1.6vw, 1.25rem); color: inherit; } .fl-node- .bewod-hero-gallery-notice { margin: 0; padding: 1rem; text-align: center; font-size: 0.875rem; } @media (max-width: 991px) { .fl-node- .bewod-hero-gallery { height: auto; } .fl-node- .bewod-hero-gallery__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; height: auto; } .fl-node- .bewod-hero-gallery--single .bewod-hero-gallery__grid { grid-template-columns: 1fr; grid-template-rows: auto; } .fl-node- .bewod-hero-gallery__main { grid-column: 1 / span 2; grid-row: 1; aspect-ratio: 16 / 9; height: auto; } .fl-node- .bewod-hero-gallery--single .bewod-hero-gallery__main { grid-column: 1; grid-row: 1; } .fl-node- .bewod-hero-gallery__side-1-wrap { grid-column: 1; grid-row: 2; aspect-ratio: 4 / 3; height: auto; } .fl-node- .bewod-hero-gallery__side-2-wrap { grid-column: 2; grid-row: 2; aspect-ratio: 4 / 3; height: auto; } .fl-node- .bewod-hero-gallery__view-btn { grid-column: 2; grid-row: 2; justify-self: end; margin: 0 1rem 1.25rem 0; padding: 0.65rem 0.75rem; min-width: 0; } .fl-node- .bewod-hero-gallery__view-icon { display: inline-flex; } .fl-node- .bewod-hero-gallery__view-label { display: none; } .fl-node- .bewod-hero-gallery--single .bewod-hero-gallery__view-btn { grid-column: 1; grid-row: 1; } .fl-node- .bewod-hero-gallery__meta { position: relative; left: auto; bottom: auto; grid-column: 1 / span 2; grid-row: 1; align-self: end; justify-self: start; max-width: calc(100% - 2rem); margin: 0 1rem 1rem; } .fl-node- .bewod-hero-gallery--single .bewod-hero-gallery__meta { grid-column: 1; } .fl-node- .bewod-hero-gallery__title { font-size: 36px; } }