.section_index .head-container {
  margin-bottom: 40px;
}

.section_index .two_columns {
  display: grid;
  grid-template-columns: 680px 300px;
}

.section_index .two_columns > .column:nth-child(1) {
  padding: 0 40px 0 0;
}
.section_index .two_columns > .column:nth-child(2) {
  border: 1px solid var(--line);
  border-top: none;
  border-bottom: none;
  padding: 0 39px;
}


.section_index .editorial_announcement {
  display: grid;
  grid-template-columns: 1fr max-content;
  position: relative;
  margin: 0 0 40px;
  background: #ffedab;
  padding: 26px 5px;
  font-size: 16px;
}
.section_index .editorial_announcement p {
  margin: 0 10px 0 52px;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif;
}
.section_index .editorial_announcement > .icon {
  left: 24px;
  top: 24px;
}
.section_index .editorial_announcement .label {
  margin-right: 8px;
  font-weight: bold;
  text-transform: uppercase;
}
.section_index .editorial_announcement .more_link {
  position: relative;
  padding: 0 33px 0 0;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: var(--prop_text_spacing);
  text-transform: uppercase;
}
.section_index .editorial_announcement .more_link .icon {
  right: 21px;
  top: 5px;
}


.section_index .top_article {
  padding-bottom: 39px;
  border-bottom: 1px solid var(--line);
}
.section_index .top_article .image img {
  width: 100%;
}
.section_index .top_article h3 {
  margin-top: 7px;
  padding: 0;
  font-size: 32px;
  font-weight: bold;
  line-height: 40px;
  letter-spacing: -0.6px;
}
.section_index .top_article p {
  margin-top: 8px;
  font-size: 16px;
  line-height: 26px;
}
.section_index .top_article p a {
  display: block; /* Otherwise the space between the spaced-out lines is not included. */
  color: var(--text-main); /* Keep the same colour on hover. */
}
.section_index .top_article .authors,
.section_index .top_article .rubrika {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: var(--prop_text_spacing);
  text-transform: uppercase;
}
.section_index .top_article .rubrika {
  margin-top: 24px;
}
.section_index .top_article .authors {
  margin: 0;
}
.section_index .top_article .authors .images {
  display: none;
}
.section_index .top_article .rubrika,
.section_index .top_article .rubrika a {
  color: var(--link-blue);
}
.section_index .top_article .rubrika a:hover {
  color: var(--link-light-blue);
}
.section_index .top_article .pub_time {
  margin-top: 17px;
}


.section_index .pinned_article {
  margin-top: 40px;
  background: #dff1f6;
}
.section_index .pinned_article .layout {
  display: grid;
  grid-template-columns: calc(640px - 216px) 216px;
}
.section_index .pinned_article .layout.without_image {
  grid-template-columns: 640px;
}
.section_index .pinned_article .layout > div { /* Text */
  padding: 24px;
}
.section_index .pinned_article .rubrika { /* TODO combine with top article rubrikas? Or Authors? */
  margin-top: -2px;
  font-weight: 600;
  font-size: 12px;
  color: var(--link-main-hover);
  letter-spacing: var(--prop_text_spacing);
  text-transform: uppercase;
}
.section_index .pinned_article h3 {
  margin-top: 5px;
  padding: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.2px;
}
.section_index .pinned_article h3 .icon {
  margin-left: 7px;
}
.section_index .pinned_article .pub_time {
  margin-top: 9px;
}
.section_index .pinned_article .image img {
  width: 100%;
}


.section_index .articles ol {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 40px;
  margin-top: 40px;
  list-style: none;
}
.section_index .articles li {
  flex: 0 0 300px;
}
.section_index .articles h3 {
  margin: 11px 0 1px;
  padding: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.2px;
}
.section_index .articles .authors {
  display: flex;
  gap: 12px;
}
.section_index .articles .authors.multiple {
  flex-direction: column; /* Names below images. */
}
.section_index .articles .authors .images {
  display: flex; /* Even for single images - it won't hurt, and it gives the link a size for the border to wrap around. */
  gap: 6px;
  flex-wrap: wrap;
}
.section_index .articles .authors .images a img {
  margin: -3px;
  border: 3px solid transparent;
}
.section_index .articles .authors .images a:hover img,
/* Highlight the images upon hovering over the names. */
.section_index .articles .authors:has(.names a:nth-of-type(1):hover) .images a:nth-of-type(1) img,
.section_index .articles .authors:has(.names a:nth-of-type(2):hover) .images a:nth-of-type(2) img,
.section_index .articles .authors:has(.names a:nth-of-type(3):hover) .images a:nth-of-type(3) img,
.section_index .articles .authors:has(.names a:nth-of-type(4):hover) .images a:nth-of-type(4) img,
.section_index .articles .authors:has(.names a:nth-of-type(5):hover) .images a:nth-of-type(5) img,
.section_index .articles .authors:has(.names a:nth-of-type(6):hover) .images a:nth-of-type(6) img {
  border-color: var(--link-light-blue);
}
.section_index .articles .authors .images img {
  width: 40px;
  height: 40px;
}


.section_index .articles .authors .names,
.section_index .articles .authors .names a {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: var(--prop_text_spacing);
  color: var(--link-blue);
  text-transform: uppercase;
}
.section_index .articles .authors .names {
  padding-top: 4px;
  min-height: 36px; /* 36 = 40 image height - 4 padding */
}
.section_index .articles .authors.multiple .names {
  padding-top: 0;
  min-height: unset;
}
.section_index .articles .authors .names a:hover,
  /* Highlight the names upon hovering over the images. */
.section_index .articles .authors:has(.images a:nth-of-type(1):hover) .names a:nth-of-type(1),
.section_index .articles .authors:has(.images a:nth-of-type(2):hover) .names a:nth-of-type(2),
.section_index .articles .authors:has(.images a:nth-of-type(3):hover) .names a:nth-of-type(3),
.section_index .articles .authors:has(.images a:nth-of-type(4):hover) .names a:nth-of-type(4),
.section_index .articles .authors:has(.images a:nth-of-type(5):hover) .names a:nth-of-type(5),
.section_index .articles .authors:has(.images a:nth-of-type(6):hover) .names a:nth-of-type(6){
  color: var(--link-light-blue);
}


.section_index .more_link.bomis {
  display: block;
  position: relative;
  border: 2px solid var(--link-darkblue);
  padding: 8px 14px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--link-darkblue);
}
.section_index .more_link.bomis .icon {
  top: 13px;
  right: 16px;
}
.section_index .more_link.bomis:hover {
  border-color: var(--link-light-blue);
  color: var(--link-light-blue);
}


.section_index .release_topics {
  position: relative;
  margin-top: 40px;
  border-top: 1px solid var(--line);
  padding-top: 39px;
}

.section_index .release_topics .scrollable_container {
  overflow: hidden;
}

.section_index .release_topics ol {
  display: flex;
  gap: 40px 40px;
  overflow-x: auto;
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
  margin-top: 24px;
  list-style: none;
}
.section_index .release_topics li {
  flex: 0 0 300px;
  height: 240px;
  overflow: hidden;

  background: linear-gradient(var(--topic-overlay-1), var(--topic-overlay-1)), url('../img/release_topics/topic_sample.jpg') center/cover no-repeat;
  background-blend-mode: multiply;
  background-size: 100%; /* For the transition to work. */
  transition: background-size 0.2s ease-out;
}
.section_index .release_topics li:hover {
  background-size: 110%;
}
/* The background-images are applied dynamically:
.section_index .release_topics li:nth-child(1) {
  background-image: linear-gradient(var(--topic-overlay-1), var(--topic-overlay-1)), url('../img/release_topics/topic_1.jpg');
}
.section_index .release_topics li:nth-child(2) {
  background-image: linear-gradient(var(--topic-overlay-2), var(--topic-overlay-2)), url('../img/release_topics/topic_2.jpg');
}
.section_index .release_topics li:nth-child(3) {
  background-image: linear-gradient(var(--topic-overlay-3), var(--topic-overlay-3)), url('../img/release_topics/topic_3.jpg');
}
.section_index .release_topics li:nth-child(4) {
  background-image: linear-gradient(var(--topic-overlay-4), var(--topic-overlay-4)), url('../img/release_topics/topic_3.jpg');
}
.section_index .release_topics li:nth-child(5) {
  background-image: linear-gradient(var(--topic-overlay-5), var(--topic-overlay-5)), url('../img/release_topics/topic_3.jpg');
}
*/

.section_index .release_topics a {
  display: block;
  position: relative;
  padding: 24px 44px 24px 36px;
  height: 192px; /* 240-padding */
}
.section_index .release_topics li .topic_name {
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 0.1px;
  text-transform: uppercase;
}
.section_index .release_topics li .topic_name span {
  box-shadow: #ffffff 12px 0 0, #ffffff -12px 0 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: #ffffff;
  padding: 4px 0; /* Fills the space between the lines (created by too big line-height). */
  line-height: 30px;
}

.section_index .release_topics .article_count {
  position: absolute;
  left: 24px;
  bottom: 24px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: var(--prop_text_spacing);
  text-transform: uppercase;
  color: #ffffff;
}
.section_index .release_topics .article_count .icon {
  margin-left: 5px;
  padding-bottom: 2px;
  vertical-align: middle;
}
.section_index .release_topics > .icon {
  top: 183px;
  cursor: pointer;
}
.section_index .release_topics > .icon.arrow_circled_left {
  right: unset;
  left: -20px;
}
.section_index .release_topics > .icon.arrow_circled_right {
  right: -20px;
}



.section_index .fp_video {
  display: grid;
  grid-template-columns: 640px 340px;
  position: relative;
  margin: 40px 0 40px;
  border-top: 1px solid var(--line);
  padding-top: 39px;
}
.section_index .fp_video h3 {
  margin-top: 14px;
  padding: 0;
  font-size: 21px;
  font-weight: bold;
  line-height: 26px;
}
.section_index .fp_video .play_video {
  display: block;
}
.section_index .fp_video .play_video img {
  width: 100%;
}
.section_index .fp_video .play_video .icon {
  top: 179px;
  right: unset;
  left: 280px;
}
/* On hover, do not change the colour, but the opacity. */
.section_index .fp_video .play_video:hover {
  color: var(--text-main);
  --play-circle-opacity: 1;
}
.section_index .fp_video .pub_time {
  margin-top: 16px;
}
.section_index .fp_video > div {
  position: relative;
  background: var(--bg-light);
  padding: 40px 40px 56px;
}
.section_index .fp_video .rubrika { /* TODO combine with top article rubrikas? Or Authors? */
  margin-top: -2px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: var(--prop_text_spacing);
  text-transform: uppercase;
}
.section_index .fp_video .rubrika,
.section_index .fp_video .rubrika a {
  color: var(--link-main-hover);
}
.section_index .fp_video .rubrika a:hover {
  color: var(--link-light-blue);
}
.section_index .fp_video .more_link {
  display: block;
  position: absolute;
  bottom: 32px;
  left: 40px;
  padding: 6px 0;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: var(--prop_text_spacing);
  text-transform: uppercase;
  color: var(--link-main-hover);
}
.section_index .fp_video .more_link .icon {
  margin-left: 6px;
  padding-bottom: 2px;
  vertical-align: middle;
}
.section_index .fp_video .more_link:hover {
  color: var(--link-light-blue);
}



.section_index .latest_release a {
  display: block;
}
.section_index .latest_release img {
  width: 100%;
}
.section_index .latest_release .release_details {
  background: var(--bg-light);
  padding: 15px 16px 16px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: var(--prop_text_spacing);
  text-transform: uppercase;
}
.section_index .latest_release .release_details .pub_time {
  color: var(--link-darkblue);
}
.section_index .latest_release .release_details .release_no {
  color: var(--text-light);
}
.section_index .latest_release .rubrika {
  margin-top: 24px;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-light);
  letter-spacing: var(--prop_text_spacing);
  text-transform: uppercase;
}
.section_index .latest_release .blurb,
.section_index .latest_release .blurb li,
.section_index .latest_release .blurb p {
  font-size: 16px;
  line-height: 20px;
}
.section_index .latest_release ul {
  margin-top: 12px;
  list-style-type: none;
}
.section_index .latest_release li {
  margin-bottom: 16px;
  background: url('/img/ul_bullet.svg') no-repeat 0 8px;
  padding: 0 0 0 16px;
}

.section_index .latest_release a.more_link {
  margin-top: 24px;
}



.section_index .online_article_archive {
  margin: 20px 0 20px;
}
.section_index .online_article_archive a.more_link {
  grid-template-columns: 164px 1fr;
}



.section_index .job_ads {
  margin-top: 40px;
  border-top: 1px solid var(--line);
  padding-top: 19px;
}
.section_index .job_ads > svg {
  color: var(--link-main-hover);
}
.section_index .job_ads .rubrika {
  margin-top: 11px;
  font-weight: bold;
  font-size: 16px;
  line-height: 20px;
  color: var(--link-main-hover);
  text-transform: uppercase;
}
.section_index .job_ads ol {
  margin-top: 24px;
  list-style-type: none;
}
.section_index .job_ads li {
  margin-bottom: 24px;
}
.section_index .job_ads li > a {
  display: block;
}
.section_index .job_ads li h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
.section_index .job_ads li .time {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: var(--prop_text_spacing);
  text-transform: uppercase;
}
.section_index .job_ads li .time .icon {
  margin-top: -1px;
  margin-right: 8px;
  vertical-align: middle;
}
.section_index .job_ads li .employer {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: var(--prop_text_spacing);
  text-transform: uppercase;
  color: var(--text-light);
}
.section_index .job_ads .submit_link {
  display: block;
  position: relative;
  margin-top: -8px;
  padding: 6px 0;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: var(--prop_text_spacing);
  text-transform: uppercase;
  color: var(--link-main-hover);
}
.section_index .job_ads .submit_link .icon {
  margin-left: 6px;
  padding-bottom: 2px;
  vertical-align: middle;
}
.section_index .job_ads .submit_link:hover {
  color: var(--link-light-blue);
}
/* TODO same as other readmore links - unify */
.section_index .job_ads .more_link {
  display: block;
  position: relative;
  margin-top: 16px;
  border: 2px solid var(--link-darkblue);
  padding: 8px 14px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--link-darkblue);
}
.section_index .job_ads .more_link:hover {
  border-color: var(--link-light-blue);
  color: var(--link-light-blue);
}
.section_index .job_ads .more_link .icon {
  top: 13px;
  right: 16px;
}



.section_index .job_ads_banner {
  margin-top: 40px;
  background: #d9d9d9;
  width: 220px;
  overflow: hidden;
  /* Style for the demo text.
  font-size: 21px;
  font-weight: bold;
  line-height: 24px;
  color: #898b8e;
  text-align: center;
  text-transform: uppercase;*/
}



.section_index .latest_news > svg {
  color: var(--link-main-hover);
}
.section_index .latest_news h2 {
  margin-top: 11px;
}
.section_index .latest_news ol {
  display: flex;
  flex-wrap: wrap;
  gap: 41px 40px;
  margin-top: 24px;
  list-style: none;
}
.section_index .latest_news li {
  flex: 0 0 300px;
}
.section_index .latest_news h3 {
  font-size: 16px;
  font-weight: 600;
}
.section_index .latest_news h3 .icon.camera {
  vertical-align: middle;
}
.section_index .latest_news .pub_time {
  margin-top: 7px;
}
.section_index .latest_news .more_link {
  display: block;
  position: relative;
  margin-top: 22px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: var(--prop_text_spacing);
  text-transform: uppercase;
  color: var(--link-main-hover);
}
.section_index .latest_news .more_link .icon {
  margin-left: 5px;
  padding-bottom: 2px;
  vertical-align: middle;
}
.section_index .latest_news .more_link:hover {
  color: var(--link-light-blue);
}



.section_index .events > svg {
  color: var(--link-main-hover);
}
.section_index .events h2 {
  margin-top: 12px;
}
.section_index .events ol {
  margin-top: 24px;
  list-style-type: none;
}
.section_index .events li {
  margin-bottom: 25px;
}
.section_index .events li h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}
.section_index .events li .time {
  margin-top: 7px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: var(--prop_text_spacing);
  text-transform: uppercase;
}
.section_index .events li .time .icon {
  margin-right: 8px;
  vertical-align: middle;
}
.section_index .events li .organizer {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: var(--prop_text_spacing);
  text-transform: uppercase;
  color: var(--text-light);
}
.section_index .events .more_link {
  display: block;
  position: relative;
  margin-top: -3px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: var(--prop_text_spacing);
  text-transform: uppercase;
  color: var(--link-main-hover);
}
.section_index .events .more_link .icon {
  margin-left: 6px;
  padding-bottom: 2px;
  vertical-align: middle;
}
.section_index .events .more_link:hover {
  color: var(--link-light-blue);
}



.section_index .self_prom {
  display: flex;
  align-items: center;
  margin-top: 38px;
  border-top: 1px solid var(--line);
  padding-top: 39px;
}
.section_index .self_prom a:nth-child(1) {
  margin-right: 120px;
}
.section_index .self_prom a:nth-child(1) img {
  width: 300px;
}
.section_index .self_prom a:nth-child(2) {
  margin-right: 120px;
}
.section_index .self_prom a:nth-child(2) img {
  width: 180px;
}
.section_index .self_prom a:nth-child(3) img {
  width: 135px;
}