section[data-cattype="250"]{ padding: 0; } [data-cattype="250"] .container{ width: 100%; max-width: 100%; padding: 0; } [data-cattype="250"] .grid-container { display: grid; grid-template-columns: 25% 25% 25% 25%; grid-template-areas: 'void photo-ver1 content1 content1' 'photo-hor photo-hor photo-sq1 photo-ver2' 'content2 content2 photo-sq2 photo-ver2'; grid-gap: 0px; } [data-cattype="250"] .grid-container > div{ text-align: center; padding: 20px; min-height: 15vw; } [data-cattype="250"] .box-void{ grid-area: void; } [data-cattype="250"] .box-photo-ver1{ grid-area: photo-ver1; height: 27vw; background-image: url('../../../data/ckfinder/images/about-us/about_us_team_meeting.jpg'); } [data-cattype="250"] .box-content1{ grid-area: content1; } [data-cattype="250"] .box-photo-hor{ grid-area: photo-hor; background-image: url('../../../data/ckfinder/images/about-us/about_us_team_meeting.jpg'); } [data-cattype="250"] .box-content2{ grid-area: content2; } [data-cattype="250"] .box-photo-sq1{ grid-area: photo-sq1; background-image: url('../../../data/ckfinder/images/about-us/about_us_team_meeting.jpg'); } [data-cattype="250"] .box-photo-sq2{ grid-area: photo-sq2; background-image: url('../../../data/ckfinder/images/about-us/about_us_team_meeting.jpg'); } [data-cattype="250"] .box-photo-ver2{ grid-area: photo-ver2; background-image: url('../../../data/ckfinder/images/about-us/about_us_team_meeting.jpg'); } [data-cattype="250"] h3 { font-size: 2em; margin-bottom: 15px; } [data-cattype="250"] .grid-container > div.box-content1, [data-cattype="250"] .grid-container > div.box-content2{ display: flex; flex-wrap: wrap; align-items: center; padding: 0 60px; } [data-cattype="250"] .grid-container > div[class^="box-photo-"]{ background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; } [data-cattype="250"] div[class^="box-photo-"] .caption{ position: absolute; right: 15px; bottom: 15px; color: #fff; font-weight: 200; font-size: 1.5em; text-shadow: 0px 0px 6px #000; z-index: 3; } @media (max-width: 1400px) { [data-cattype="250"] .box-photo-ver1{ grid-area: photo-ver1; height: auto; } [data-cattype="250"] .grid-container .inner-content{ padding: 15px 0; } } @media (min-width: 768px) and (max-width: 980px) { [data-cattype="250"] .grid-container { display: grid; grid-template-columns: 50% 50% ; grid-template-areas: 'photo-ver1 photo-sq2' 'content1 content1' 'photo-sq1 photo-ver2' 'content2 content2' 'photo-hor photo-hor'; grid-gap: 0px; } [data-cattype="250"] .box-void{ height: 0; } [data-cattype="250"] .box-photo-ver1, [data-cattype="250"] .grid-container > div[class^="box-photo-"]{ height: 50vw; min-height: 50vw; } [data-cattype="250"] .grid-container > div.box-content1, [data-cattype="250"] .grid-container > div.box-content2{ padding: 60px 15px; } } [data-cattype="250"] .multi-flip-grid{ position: relative; width: 100%; } [data-cattype="250"] .multi-flip-grid .flip-tile{ position: absolute; inset: 0; background-size: cover; background-position: center; } [data-cattype="250"] .multi-flip-grid .flip-tile{ backface-visibility: hidden; transform-style: preserve-3d; transition: transform .20s cubic-bezier(.22,.82,.16,1); } [data-cattype="250"] .multi-flip-grid { position: absolute; inset: 0; } [data-cattype="250"] .grid-container > div { position: relative; } [data-cattype="250"] .flip-showY { transform: rotateY(0deg); } [data-cattype="250"] .flip-enterY{ transform: rotateY(-180deg); } [data-cattype="250"] .flip-exitY { transform: rotateY(180deg); } [data-cattype="250"] .flip-showX { transform: rotateX(0deg); } [data-cattype="250"] .flip-enterX{ transform: rotateX(-180deg); } [data-cattype="250"] .flip-exitX { transform: rotateX(180deg); } @media (max-width: 767px) { [data-cattype="250"] .grid-container { display: grid; grid-template-columns: 50% 50% ; grid-template-areas: 'photo-ver1 photo-sq2' 'content1 content1' 'photo-sq1 photo-ver2' 'content2 content2' 'photo-hor photo-hor'; grid-gap: 0px; } [data-cattype="250"] .box-void{ height: 0; } [data-cattype="250"] .box-photo-ver1, [data-cattype="250"] .grid-container > div[class^="box-photo-"]{ height: 50vw; min-height: 50vw; } [data-cattype="250"] .grid-container > div.box-content1, [data-cattype="250"] .grid-container > div.box-content2{ padding: 45px 15px; } } @media (max-width: 480px) { [data-cattype="250"] div[class^="box-photo-"] .caption{ font-size: 0.9em; font-weight: 500; } }