.news {
  margin: 0;
}
.news__list {
  list-style-type: none;
  border-bottom: 1px solid #c9c9c9;
}
.news__list li {
  width: 100%;
  border-top: 1px solid #c9c9c9;
}
.news__list li a {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 1em 0;
}
.news__list li span {
  display: block;
  color: #000;
}
.news__list li span.date {
  min-width: 110px;
  font-size: 13px;
}
.news__list li span.txt {
  font-size: 16px;
}
.news__list--collapsed .news__item:nth-child(n + 4) {
  display: none;
}
.news__toggle {
  display: none;
  container-type: inline-size;
}
.news__toggle--visible {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 1em;
  row-gap: 2em;
  padding: 2em 0 1em;
}
.news__toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  grid-column: 2;
  padding: 0.5em 1.5em;
  font-size: 16px;
  color: #000;
  background-color: #fff;
  border: 1.5px solid #000;
  border-radius: 999px;
  cursor: pointer;
}
.news__toggle-btn:hover {
  background-color: #000;
  color: #fff;
}
.news__toggle-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  border-radius: 50%;
  transition: transform 0.2s ease;
}
.news__toggle-btn__icon svg {
  display: block;
}
.news__toggle-btn:hover .news__toggle-btn__icon {
  border-color: #fff;
}
.news__toggle--expanded .news__toggle-btn__icon {
  transform: rotate(180deg);
}
.news__archive-link {
  display: none;
  align-items: center;
  gap: 0.75em;
  grid-column: 3;
  justify-self: end;
  color: #000;
  text-decoration: none;
}
.news__toggle--expanded .news__archive-link {
  display: inline-flex;
}
@media only screen and (min-width: 769px) {
  .news__archive-link {
    margin-right: 2em;
    font-size: 16px;
  }
}
.news__archive-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  border-radius: 50%;
}
.news__archive-link__icon svg {
  display: block;
}
@media screen and (max-width: 768px) {
  .news__toggle--visible {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .news__toggle-btn,
  .news__archive-link {
    grid-column: 1;
    justify-self: center;
  }
}
/* When the bar itself is too narrow for the link to sit beside the
   centered button (any viewport size), drop the link to its own row
   and center it like the button. */
@container (max-width: 480px) {
  .news__archive-link {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }
}

@media screen and (max-width: 768px) {
  .news__list li a {
    flex-direction: column;
    align-items: start;
  }
  .news__list li span.date {
    min-width: 100%;
    font-size: 3.46vw;
  }
  .news__list li span.txt {
    font-size: 3.73vw;
    margin-top: 0.4em;
    line-height: 1.6;
  }
}