.image-content-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  width: 100%;
  margin-block-start: 3.1rem;
}

.image-content {
  display: flex;
  gap: 2rem;
  margin-block-start: 3.1rem;
  width: 100%;
}

.tabs--desktop .image-content {
  margin-block-start: 0;
}

.image-content-grid .image-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-block-start: 1rem;
  border: 1px solid var(--calcite-ui-border-2);
  width: 100%;
}

.image-content:nth-child(even) {
  flex-direction: row-reverse;
}

.image-content-grid .image-content:nth-child(even) {
  flex-direction: column;
}

.image-content--start,
.image-content--end {
  width: 50%;
}
.image-content-grid .image-content--start,
.image-content-grid .image-content--end {
  width: 100%;
}

.image-content-grid .image-content--end:has(.image-content-content) {
  height: 100%;
  width: auto;
}

.image-content--end:has(.image-content-content) {
  display: flex;
  align-items: center;
  padding: calc(17px + 12.75px);
}

.image-content-img {
  display: flex;
  height: calc(100% - 4px);    
}

.image-content-img iframe,
.image-content-img img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: clamp(270px, 25.637672vw, 392px);
}

/* IMPORTANT */
/* image files should be exported at 700px x 394px */
.image-content-grid .image-content-img iframe,
.image-content-grid .image-content-img img {
  object-fit: cover;
  width: 100%; 
  height: 100%;
}

.image-content-img img {
  object-position: center;
}

.image-content-content {
  max-width: calc(100% - 1rem);
}

.image-content-text {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.image-content-grid .image-content-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.image-content-grid .image-content-content calcite-link {
  margin-block-start: auto;
}

@media (max-width: 1200px) {
  .image-content-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 860px) {
  .image-content-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .image-content-grid .image-content,
  .image-content {
    width: calc(100% - 1.5rem);
    margin-inline: auto;
  }

  .image-content:nth-child(even),
  .image-content {
    border: 1px solid var(--calcite-ui-border-2);
    flex-direction: column;
    gap: 1rem;
  }

  .image-content--end:has(.image-content-content) {
    width: calc(100% -  ((17px + 12.75px) * 2));
  }
  
  .image-content--start,
  .image-content--end {
    width: 100%;
  }
  
  .image-content-content h4 {
    margin-block-end: 1rem;
  }

  .image-content-content .leader-2 {
    margin-top: 1rem;
  }
}
}