[contenteditable="true"] > .mosaiac-grid-with-captions tbody {
  display: table;
}
[contenteditable="true"] > .mosaiac-grid-with-captions tbody > td {
  width: 50%;
  display: table-cell;
  padding: 1rem;
}
[contenteditable="true"] > .mosaiac-grid-with-captions tbody .grid-item td {
  display: table-cell !important;
  width: 50% !important;
}
#mycmodal {
  display: none;
}
.mosaiac-grid-with-captions tbody {
  display: grid;
  grid-template-areas:
    "a a b"
    "a a c"
    "d e f"
    "g h h"
    "i h h";
}
.grid-item td {
  height: 100%;
  display: block;
}
.op-top {
  object-position: top;
}
.op-bot {
  object-position: bottom;
}
.page-title-row {
  overflow-y: auto;
  max-height: 80vh;
  scrollbar-color: white #00000040;
  scrollbar-width: thin;
}
.mosaiac-grid-with-captions .grid-item {
  aspect-ratio: 3/2;
}
.grid-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  padding: 0.5rem;
}
img.cmodal-trigger {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.grid-item:nth-child(1) {
  grid-area: a;
}
.grid-item:nth-child(2) {
  grid-area: b;
}
.grid-item:nth-child(3) {
  grid-area: c;
}
.grid-item:nth-child(4) {
  grid-area: d;
}
.grid-item:nth-child(5) {
  grid-area: e;
}
.grid-item:nth-child(6) {
  grid-area: f;
}
.grid-item:nth-child(7) {
  grid-area: g;
}
.grid-item:nth-child(8) {
  grid-area: h;
}
.grid-item:nth-child(9) {
  grid-area: i;
}

/* Modal */
.cmodal-trigger {
  cursor: pointer;
}
/* Styles for the modal */
.cmodal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
}
.Main .caption {
  display: none;
}
[contenteditable~="true"] .caption {
  display: block !important;
}

/* Modal content */
.cmodal-content {
  margin: 0 auto;
  padding: 0;
  border: 0;
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cmodal-content #modalGraphic,
.cmodal-content img {
  display: flex;
  height: 100%;
  width: 100%;
  object-fit: scale-down;
  max-height: 100%;
  object-position: center;
}
#cmodalCaption {
  height: fit-content;
  color: white;
  width: 100%;
  padding: 3rem;
  width: 30%;
}
.close {
  z-index: 9999;
  position: absolute;
  background-image: url("https://www.otis.edu/_resources/assets/close.svg");
  height: 32px;
  width: 32px;
  top: 100px;
  right: 100px;
  background-color: var(--coral);
  background-size: 50%;
  background-position: center;
  transition: 0.2s;
  background-repeat: no-repeat;
  padding: 0 !important;
  cursor: pointer;
}
.close:hover,
.close:focus {
  background-size: 75%;
  cursor: pointer;
}

.modalControls {
  display: flex;
  position: absolute;
  bottom: 0;
  width: 100%;
  max-width: 350px;
  justify-content: space-between;
  padding: 2rem;
  right: 2rem;
}
.modalControls .next,
.modalControls .previous {
  height: 4rem;
  filter: invert(1);
  -webkit-filter: invert(1);
  background: none;
}
.modalControls .next:after,
.modalControls .previous:after {
  height: 4rem;
  width: 5rem;
  display: block;
  transform: translateX(0rem);
  transition: 0.2s;
}

.modalControls .next:hover,
.modalControls .previous:hover {
  filter: invert(0.7);
  -webkit-filter: invert(0.7);
  cursor: pointer;
  padding-right: 0rem;
}

.modalControls .next:after {
  content: url("https://www.otis.edu/_resources/assets/arrow-right.svg");
}
.modalControls .previous:after {
  content: url("https://www.otis.edu/_resources/assets/arrow-left.svg");
}

.modalControls .next:hover:after {
  transform: translateX(2rem);
}
.modalControls .previous:hover:after {
  transform: translateX(-2rem);
}

/* Mosaic Components */
.square-grid-ae,
.mosaic-grid-ae {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.square-grid-ae .grid-item,
.square-grid-ae .grid-item > div,
.mosaic-grid-ae .grid-item,
.mosaic-grid-ae .grid-item > div {
  aspect-ratio: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.square-grid-ae .grid-item {
  grid-area: unset !important;
}
.image-title:after {
  content: "";
  display: block;
  width: 3rem;
  margin-top: 1rem;
  border-top: 0.25rem solid var(--coral);
}

.mosaic tbody,
.mosaic-grid-ae {
  display: grid;
  grid-auto-rows: min-content;
  gap: 0;
}
/* 9 image squares */

.mosaic-9i-s tbody,
.mosaic-grid-ae {
  grid-template-areas:
    "a a b"
    "a a c"
    "d e f"
    "g h h"
    "i h h";
}
.mosaic-9i-s .grid-item {
  aspect-ratio: 1;
}
.bordered img.cmodal-trigger{
	border: 1px solid #ccc;
}
/* 9 image landscape */

.mosaic-9i-l tbody,
.mosaic-9i-s tbody,
.mosaic-9i-l tbody,
.mosaic-9i-s div {
  grid-template-areas:
    "a a b"
    "a a c"
    "d e f"
    "g h h"
    "i h h";
}
.mosaic-6i-s tbody {
  display: grid;
  grid-template-areas:
    "a a b"
    "a a c"
    "d f f"
    "e f f";
}

.mosaic-9i-s tbody,
.mosaic-9i-s div,
.mosaic-6i-s tbody,
.mosaic-6i-s div {
  grid-auto-rows: 1fr;
  grid-auto-columns: auto;
}
.mosaic-6i-l tbody {
  grid-auto-rows: 1fr;
  grid-auto-columns: 2fr;
	grid-template-areas:
		"a a b"
        "a a c"
        "d f f"
        "e f f";
}

.mosaic-9i-l .grid-item {
  aspect-ratio: 3/2;
}

/* 6 image landscape */

.mosaic-6i-l .grid-item,
.grid-item .img-container {
  aspect-ratio: 3/2;
  overflow: hidden;
  height: 100%;
}

/* 9 image portrait */
.mosaic-9i-p tbody {
  grid-template-areas:
    "a a b c d"
    "a a e i i"
    "f g h i i";
}
.mosaic-9i-p .grid-item {
  aspect-ratio: 2/3;
}

.grid-item:nth-child(1) {
  grid-area: a;
}
.grid-item:nth-child(2) {
  grid-area: b;
}
.grid-item:nth-child(3) {
  grid-area: c;
}
.grid-item:nth-child(4) {
  grid-area: d;
}
.grid-item:nth-child(5) {
  grid-area: e;
}
.grid-item:nth-child(6) {
  grid-area: f;
}
.grid-item:nth-child(7) {
  grid-area: g;
}
.grid-item:nth-child(8) {
  grid-area: h;
}
.grid-item:nth-child(9) {
  grid-area: i;
}

#mycmodal {
  display: none;
}

@media screen and (max-width: 768px) {
  #mycmodal {
    flex-direction: column;
    justify-content: space-between;
  }
  .modalControls {
    position: static;
    right: unset;
    padding: 1rem;
    max-width: unset;
  }
  .mosaiac-grid-with-captions tbody {
    display: block;
  }
  .mosaiac-grid-with-captions tbody td {
    margin-bottom: 1rem;
  }
  .cmodal-content {
    flex-direction: column;
    overflow: auto;
    justify-content: space-between;
  }
  #cmodalCaption {
    padding: 1rem;
  }
  img.cmodal-trigger {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
  }
  .cmodal-content img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: unset;
    max-height: unset;
  }
  span.close {
    position: absolute;
    align-self: end;
    height: 2rem;
    width: 2rem;
    display: block;
    padding: 2rem;
    margin: 1rem;
    aspect-ratio: 1;
    right: 0;
    top: 0;
  }
  #cmodalCaption {
    padding: 0 1.5rem;
    width: 100% !important;
  }
  .modalControls .next,
  .modalControls .previous {
    height: unset;
  }
  .modalControls .next:after,
  .modalControls .previous:after {
    width: 3rem;
    height: unset;
  }
  .grid-item:nth-child(-n + 9) {
    grid-area: unset;
  }

  .modalControls .next:hover:after {
    transform: translateX(0rem);
  }
  .modalControls .previous:hover:after {
    transform: translateX(0rem);
  }
	.mosaic tbody{
		grid-template-areas: unset;
		grid-template-columns: 1fr
	}
}

.video-block {
  overflow: hidden;
  object-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
	height:100%;
}
.cmodal .video-thumb {
  display: none;
}
.grid-item iframe {
  display: none;
}
.cmodal .video-block {
  width: 100%;
  justify-content: center;
  align-self: center;
}
.video-thumb {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%; 
  overflow: hidden;
	object-fit:cover;
}

.video-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  filter: brightness(0.7);
  transition: 0.2s;
}
.video-thumb:hover img {
  filter: brightness(1);
}

.video-thumb:after,.video-thumb:before {
  display: block;
  content: "";
  background-image: url("/_resources/assets/play-black.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100px;
  height: 100px;
  max-height: 7vh;
  max-width: 7vh;
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
	transition: .2s
}
.video-thumb:before{
	transform: translate(-45%, -45%);
	filter:brightness(.5);
		opacity:.5
}
.video-thumb:hover:after {
	transform: translate(-45%, -45%);
  filter: brightness(1.5);
  transform-origin: center;

}
.video-thumb:active:after {
    filter: contrast(0) brightness(200);
}

.cmodal .cmodal-trigger {
  pointer-events: none;
}