.news-page {
  min-width: 20rem;
}

.news-main {
  padding-top: 1.5rem;
}

.news-page-section {
  padding-bottom: 0;
}

.news-page-section__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.news-page__title {
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  font-size: 3.125rem;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.0625rem;
}

.news-page__feed {
  width: 100%;
}

.news-page__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1875rem;
}

.news-page .news-card {
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 26.5625rem;
  height: 26.5625rem;
  padding: 0.875rem;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}

.news-page .news-card__top {
  grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
  column-gap: 1rem;
}

.news-page .news-card__body {
  position: relative;
}

.news-page .news-card__body h3 {
  width: 12.5625rem;
  max-width: 100%;
}

.news-page .news-card__body p {
  -webkit-line-clamp: 3;
}

.news-page .news-card__body .inline-link {
  max-height: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(0.375rem);
  transition:
    max-height 0.3s ease,
    margin 0.3s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}

.news-page .news-card:hover .news-card__body .inline-link,
.news-page .news-card:focus-within .news-card__body .inline-link {
  max-height: 2rem;
  margin: 0.3125rem 0 0;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (min-width: 992px) {
  .news-page__grid {
    grid-auto-rows: 26.5625rem;
  }
}

@media (max-width: 1199.98px) {
  .news-main {
    padding-top: 1.25rem;
  }

  .news-page__title {
    font-size: 2.625rem;
    letter-spacing: -0.0788rem;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .news-page .news-card__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.75rem;
  }

  .news-page .news-card__date,
  .news-page .news-card__image-wrap {
    width: 100%;
    min-width: 0;
  }

  .news-page .news-card__date {
    font-size: 2.3rem;
  }
}

@media (max-width: 991.98px) {
  .news-main {
    padding-top: 1rem;
  }

  .news-page-section__inner {
    gap: 1.625rem;
  }

  .news-page__title {
    font-size: 2.831rem; /* 50px @ 768 */
    letter-spacing: -0.1563rem;
  }

  .news-page__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
  }

  .news-page .news-card {
    min-height: 19.14rem; /* 338px @ 768 */
    height: 19.14rem;
    padding: 0.566rem; /* 10px @ 768 */
    gap: 0.875rem;
  }

  .news-page .news-card__date {
    flex: 0 0 auto;
    font-size: 1.586rem; /* 28px @ 768 */
    letter-spacing: -0.048rem;
  }

  .news-page .news-card__body {
    gap: 0.453rem;
  }

  .news-page .news-card__body .inline-link {
    display: none;
  }

  .news-page .news-card__body h3 {
    width: 100%;
    font-size: 1.133rem; /* 20px @ 768 */
    letter-spacing: -0.03rem;
  }

  .news-page .news-card__body p {
    font-size: 1.019rem; /* 18px @ 768 */
    letter-spacing: -0.02rem;
    -webkit-line-clamp: 3;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .news-page .news-card__top {
    display: grid;
    grid-template-columns: minmax(3.2rem, auto) minmax(0, 1fr);
    column-gap: 0.566rem;
    align-items: start;
  }

  .news-page .news-card__date {
    min-width: 0;
  }

  .news-page .news-card__image-wrap {
    width: 100%;
    min-width: 0;
    height: 10.7rem; /* 189px @ 768 */
  }
}

@media (max-width: 575.98px) {
  .news-main {
    padding-top: 0.625rem;
  }

  .news-page-section__inner {
    gap: 1.25rem;
  }

  .news-page .catalog-breadcrumbs {
    font-size: 0.6667rem; /* 12px @ 360 */
    letter-spacing: -0.02rem;
  }

  .news-page__title {
    font-size: 2.2222rem; /* 40px @ 360 */
    line-height: 1;
    letter-spacing: -0.1333rem;
  }

  .news-page__grid {
    grid-template-columns: 1fr;
    gap: 0.889rem; /* 16px @ 360 */
  }

  .news-page .news-card {
    min-height: 15.833rem; /* 285px @ 360 */
    height: auto;
    padding: 0.556rem; /* 10px @ 360 */
    gap: 0.778rem;
  }

  .news-page .news-card__date {
    font-size: 1.333rem; /* 24px @ 360 */
    letter-spacing: -0.04rem;
  }

  .news-page .news-card__body h3 {
    width: 9rem;
    max-width: 100%;
    font-size: 1.111rem; /* 20px @ 360 */
    letter-spacing: -0.03rem;
    line-height: 1;
  }

  .news-page .news-card__body p {
    font-size: 0.889rem; /* 16px @ 360 */
    letter-spacing: -0.0356rem;
    line-height: 1;
    -webkit-line-clamp: 4;
  }
}

@media (min-width: 480px) and (max-width: 575.98px) {
  .news-page__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
  }

  .news-page .news-card {
    min-height: 19.14rem; /* align with 576+ card layout */
    height: auto;
    padding: 0.566rem;
    gap: 0.875rem;
  }

  .news-page .news-card__top {
    display: grid;
    grid-template-columns: minmax(3.2rem, auto) minmax(0, 1fr);
    column-gap: 0.566rem;
    align-items: start;
  }

  .news-page .news-card__date {
    min-width: 0;
    font-size: 1.586rem;
    letter-spacing: -0.048rem;
  }

  .news-page .news-card__image-wrap {
    width: 100%;
    min-width: 0;
    height: 10.7rem; /* align with 576+ card layout */
  }

  .news-page .news-card__body {
    gap: 0.453rem;
  }

  .news-page .news-card__body h3 {
    width: 100%;
    font-size: 1.133rem;
    letter-spacing: -0.03rem;
  }

  .news-page .news-card__body p {
    font-size: 1.019rem;
    letter-spacing: -0.02rem;
    -webkit-line-clamp: 3;
  }
}

@media (max-width: 479.98px) {
  .news-page .news-card {
    height: 17rem;
  }

  .news-page .news-card__top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.5rem;
    align-items: start;
  }

  .news-page .news-card__date {
    width: 100%;
  }

  .news-page .news-card__image-wrap {
    width: 100%;
    min-width: 0;
    height: 9.5rem;
  }

  .news-page .news-card__body p {
    -webkit-line-clamp: 3;
  }

  .news-page .container {
    max-width: 100%;
    padding-inline: 1rem;
  }
}