/*
Row styles
 Image first expanded
 Image first contained
 Image second expanded
 Image second contained
 */
.image-content {
  display: grid;
  grid-template-columns: auto minmax(640px, 1600px) auto;
  grid-template-areas: "first middle end";
  min-height: 150px;
  transition: all ease-in-out 0.5s;
}

.image-content .image-wrapper {
  display: grid;
  grid-row: -1/1;
  grid-template-columns: 50% 50%;
  grid-template-areas: "first second";
}

.image-content .image-wrapper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.image-content .image-wrapper .wide {
  aspect-ratio: 2/1;
}

.image-content .image-wrapper .square {
  aspect-ratio: 1/1;
}

.image-content .content-wrapper {
  grid-column: 2/3;
  grid-row: -1/1;
  min-height: 50px;
  grid-template-columns: 50% 50%;
  grid-template-areas: "first second";
  display: grid;
  padding: 2rem;
}

.image-content .content-wrapper .content {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
}

.image-content.style1-image-first-closed .image-wrapper {
  grid-column: 2/3;
}

.image-content.style1-image-first-closed .image-wrapper img {
  grid-area: first;
}

@media (max-width: 1112px) {
  .image-content.style1-image-first-closed .image-wrapper {
    grid-template-columns: 38% 62%;
  }
}

@media (max-width: 1050px) {
  .image-content.style1-image-first-closed .image-wrapper {
    grid-template-columns: 100vw;
  }
}

.image-content.style1-image-first-closed .content-wrapper .content {
  grid-area: second;
}

@media (max-width: 1112px) {
  .image-content.style1-image-first-closed .content-wrapper {
    grid-template-columns: 38% 62%;
  }
}

.image-content.style1-image-second-closed .image-wrapper {
  grid-column: 2/3;
}

.image-content.style1-image-second-closed .image-wrapper img {
  grid-area: second;
}

@media (max-width: 1112px) {
  .image-content.style1-image-second-closed .image-wrapper {
    grid-template-columns: 38% 62%;
  }
}

@media (max-width: 1050px) {
  .image-content.style1-image-second-closed .image-wrapper {
    grid-template-columns: 100vw;
  }
}

.image-content.style1-image-second-closed .content-wrapper .content {
  grid-area: first;
}

@media (max-width: 1112px) {
  .image-content.style1-image-second-closed .content-wrapper {
    grid-template-columns: 38% 62%;
  }
}

.image-content.style1-image-first-open .image-wrapper {
  grid-column: -1/1;
}

.image-content.style1-image-first-open .image-wrapper img {
  grid-area: first;
}

@media (max-width: 1112px) {
  .image-content.style1-image-first-open .image-wrapper {
    grid-template-columns: 38% 62%;
  }
}

@media (max-width: 1050px) {
  .image-content.style1-image-first-open .image-wrapper {
    grid-template-columns: 100%;
  }
}

.image-content.style1-image-first-open .content-wrapper .content {
  grid-area: second;
}

@media (max-width: 1112px) {
  .image-content.style1-image-first-open .content-wrapper {
    grid-template-columns: 38% 62%;
  }
}

.image-content.style1-image-second-open .image-wrapper {
  grid-column: -1/1;
}

.image-content.style1-image-second-open .image-wrapper img {
  grid-area: second;
}

@media (max-width: 1112px) {
  .image-content.style1-image-second-open .image-wrapper {
    grid-template-columns: 38% 62%;
  }
}

@media (max-width: 1050px) {
  .image-content.style1-image-second-open .image-wrapper {
    grid-template-columns: 100%;
  }
}

.image-content.style1-image-second-open .content-wrapper .content {
  grid-area: first;
}

@media (max-width: 1112px) {
  .image-content.style1-image-second-open .content-wrapper {
    grid-template-columns: 38% 62%;
  }
}

.image-content.style2-image-first-open .image-wrapper {
  grid-column: -1/1;
}

.image-content.style2-image-first-open .image-wrapper img {
  grid-area: first;
}

.image-content.style2-image-first-open .content-wrapper {
  grid-template-columns: 50% 50%;
}

.image-content.style2-image-first-open .content-wrapper .content {
  grid-area: second;
}

@media (max-width: 1112px) {
  .image-content.style2-image-first-open .content-wrapper {
    grid-template-columns: 50% 50%;
  }
}

.image-content.style2-image-first-closed .image-wrapper {
  grid-column: 2;
}

@media (max-width: 1112px) {
  .image-content.style2-image-first-closed .image-wrapper {
    grid-template-columns: 50% 50%;
    grid-column: 2;
  }
}

@media (max-width: 1050px) {
  .image-content.style2-image-first-closed .image-wrapper {
    grid-template-columns: 100vw;
  }
}

.image-content.style2-image-first-closed .content-wrapper .content {
  grid-area: second;
}

@media (max-width: 1112px) {
  .image-content.style2-image-first-closed .content-wrapper {
    grid-template-columns: 50% 50%;
  }
}

.image-content.style2-image-second-open .image-wrapper {
  grid-column: -1/1;
}

.image-content.style2-image-second-open .image-wrapper img {
  grid-area: second;
}

@media (max-width: 1050px) {
  .image-content.style2-image-second-open .image-wrapper {
    grid-template-columns: 100%;
  }
}

.image-content.style2-image-second-open .content-wrapper {
  grid-template-columns: 50% 50%;
}

.image-content.style2-image-second-open .content-wrapper .content {
  grid-area: first;
}

@media (max-width: 1112px) {
  .image-content.style2-image-second-open .content-wrapper {
    grid-template-columns: 50% 50%;
  }
}

.image-content.style2-image-second-closed .image-wrapper {
  grid-column: 2;
}

.image-content.style2-image-second-closed .image-wrapper img {
  grid-area: second;
}

@media (max-width: 1112px) {
  .image-content.style2-image-second-closed .image-wrapper {
    grid-template-columns: 50% 50%;
  }
}

@media (max-width: 1050px) {
  .image-content.style2-image-second-closed .image-wrapper {
    grid-template-columns: 100vw;
  }
}

.image-content.style2-image-second-closed .content-wrapper .content {
  grid-area: first;
}

@media (max-width: 1112px) {
  .image-content.style2-image-second-closed .content-wrapper {
    grid-template-columns: 50% 50%;
  }
}

@media (max-width: 1050px) {
  .image-content {
    grid-template-columns: 100%;
    grid-template-rows: auto auto;
    grid-template-areas: "top" "bottom";
  }
  .image-content .image-wrapper {
    grid-template-columns: 100%;
    width: 100%;
  }
  .image-content .image-wrapper img {
    width: 100%;
    max-height: 50rem !important;
  }
  .image-content .content-wrapper {
    display: flex;
  }
  .image-content .content-wrapper .content {
    width: 100%;
  }
  .image-content.style1-image-first-closed .image-wrapper, .image-content.style1-image-first-open .image-wrapper, .image-content.style2-image-first-open .image-wrapper, .image-content.style2-image-first-closed .image-wrapper {
    grid-area: top;
  }
  .image-content.style1-image-first-closed .content-wrapper, .image-content.style1-image-first-open .content-wrapper, .image-content.style2-image-first-open .content-wrapper, .image-content.style2-image-first-closed .content-wrapper {
    grid-area: bottom;
  }
  .image-content.image-top-content-bottom .image-wrapper {
    grid-area: top !important;
  }
  .image-content.image-top-content-bottom .content-wrapper {
    grid-area: bottom !important;
  }
  .image-content.image-bottom-content-top .image-wrapper {
    grid-area: bottom !important;
  }
  .image-content.image-bottom-content-top .content-wrapper {
    grid-area: top !important;
  }
  .image-content.style1-image-second-closed .image-wrapper, .image-content.style1-image-second-open .image-wrapper, .image-content.style2-image-second-open .image-wrapper, .image-content.style2-image-second-closed .image-wrapper, .image-content.image-bottom-content-top .image-wrapper {
    grid-area: bottom;
  }
  .image-content.style1-image-second-closed .image-wrapper img, .image-content.style1-image-second-open .image-wrapper img, .image-content.style2-image-second-open .image-wrapper img, .image-content.style2-image-second-closed .image-wrapper img, .image-content.image-bottom-content-top .image-wrapper img {
    grid-area: initial;
  }
  .image-content.style1-image-second-closed .content-wrapper, .image-content.style1-image-second-open .content-wrapper, .image-content.style2-image-second-open .content-wrapper, .image-content.style2-image-second-closed .content-wrapper, .image-content.image-bottom-content-top .content-wrapper {
    grid-area: top;
  }
}

@media (max-width: 869px) {
  .image-content.style2-image-second-open {
    grid-template-columns: 100%;
    grid-template-rows: auto auto;
    grid-template-areas: "top" "bottom";
  }
  .image-content.style2-image-second-open .image-wrapper {
    grid-template-columns: 100%;
    width: 100%;
    grid-area: bottom;
  }
  .image-content.style2-image-second-open .image-wrapper img {
    grid-area: initial;
  }
  .image-content.style2-image-second-open .content-wrapper {
    grid-area: top;
    display: flex;
  }
  .image-content.style2-image-second-open .content-wrapper .content {
    width: 100%;
  }
}