section.news, section.blog {
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
  
  @media (max-width: 640px) {
    grid-template-columns: 1fr;
  }

  h2 {
    grid-row: 1;
    grid-column: 1 / -1;

    @media (max-width: 640px) {
      grid-column: unset;
    }
  }

  & > .link {
    grid-column: 1 / -1;
    border-radius: var(--border-radius);
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    height: unset;
    gap: 1rem;
    width: unset;
    color: #fff;
    background: var(--a);

    &::after {
      display: none;
    }

    @media (max-width: 640px) {
      grid-column: unset;
    }
  }
}

section.--news {
  display: block;
  gap: unset;
  line-height: var(--line-height);
  max-width: 140ch;

  & > picture > img {
    position: unset;
    width: unset;
    height: unset;
    object-fit: unset;
    margin: 0 2rem 2rem 2rem;
    width: 300px;
    border-radius: var(--border-radius);

    &.--right {
      float: right;
    }

    &.--left {
      float: left;
    }

    @media (max-width: 640px) {
      float: unset !important;
      display: block;
      width: 100vw;
      margin: -4rem -1.5rem 3rem -1.5rem;
      border-radius: 0;
    }
  }

}

a.news {
  height: unset;
  text-wrap: wrap;
  font-weight: normal;
  line-height: var(--line-height);
  aspect-ratio: 1;
  border-radius: var(--border-radius);
  isolation: isolate;
  position: relative;
  overflow: clip;
  animation: news-in 0.5s 0.5s ease both;
  display: block;

  @media (max-width: 640px) {
    aspect-ratio: unset;
  }

  img {
    position: absolute;
    object-fit: cover;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
  }

  &>span {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 2rem;
    background: var(--a);
    backdrop-filter: blur(5px);

    @media (max-width: 640px) {
      padding: 1rem;
    }

    strong {
      display: block;
      margin-bottom: 0.5rem;
      text-transform: uppercase;
    }

    i {
      vertical-align: middle;
      margin-left: 0.5rem;
    }
  }

}

@keyframes news-in {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  section.news a.news {
    min-height: 24rem;

    > span {
      > strong {
        margin: 0;
      }

      > span {
        display: none;
      }
    }
  }
}

@media (prefers-color-scheme: light) {
  section.news {
    h1,
    h2,
    h3,
    h4,
    a.news,
    p,
    address {
      color: var(--font-color-alternate);
    }

    span {
      color: var(--font-color);
    }
  }
}