.news-grid-container {
  --flexGap: 1.56em;
  display: grid;
  grid-template-rows: auto;
  gap: var(--flexGap);
  width: 100%;
}

.news-marker {
  position: fixed;
  left: 0;
  top: 50%;
  width: 100%;
  height: 0;
  border-top: 16px dotted #ede7de;
  stroke-linecap: round;
  pointer-events: none;
  opacity: 0;
}

.news-tile {
  aspect-ratio: 1;
}

.news-tile-link {
  width: 100%;
  height: 100%;
}

.news-tile-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.news-tile-container {
  /* set colors by js */
  --primaryColor: #FFFFFF;
  --secondaryColor: #FFFFFF;
  --tertiaryColor: #FFFFFF;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--tertiaryColor);
  will-change: box-shadow;
}

.news-tile-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.news-tile-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--tertiaryColor);
  aspect-ratio: 1;
  will-change: transform;
}

.news-tile-title-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.news-tile-title-wrapper {
  --shiftMargin: 1.875em;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.news-tile-title {
  max-width: 59%;
  height: min-content;
  max-height: 8.5em;
  overflow: hidden;
  will-change: opacity, transform;
}

.news-tile-large .news-tile-title {
  max-height: 20em;
}

.news-tile-title-wrapper-right {
  padding: 0 var(--shiftMargin);
  display: flex;
  justify-content: flex-end;
}

.news-tile-title-wrapper-left {
  padding: 0 var(--shiftMargin);
  display: flex;
  justify-content: flex-start;
}

.news-tile-title-wrapper-right .news-tile-title,
.news-tile-title-wrapper-left .news-tile-title {
  width: 35%;
}

.news-tile-text-container {}

.news-tile-font {
  font-size: var(--fs1-5);
  color: var(--backgroundColor);
  line-height: 1.2;
  font-family: var(--fontRegular);
}

/* Circle variant */

.two-half-news-tile-image-container,
.circle-news-tile-image-container {
  border-radius: 50%;
  overflow: hidden;
}

.two-half-news-tile-title-container,
.full-bleed-news-tile-title-container,
.circle-news-tile-title-container {
  background-color: var(--secondaryColor);
  border-radius: 50%;
  overflow: hidden;
}


.news-tile-trigger {
  position: absolute;
  top: calc(var(--flexGap) * -0.5);
  right: calc(var(--flexGap) * -0.5);
  width: calc(100% + var(--flexGap));
  height: calc(100% + var(--flexGap));
}