/*
 * page-ressources.css — Page Ressources style magazine Hybster
 * Layout inspiré du thème Newsmag / magazine d'actualités
 */

/* ══════════════════════════════════════════
   VARIABLES
══════════════════════════════════════════ */
:root {
  --r-blue:       #0055b1;
  --r-blue-dark:  #003d82;
  --r-blue-light: #e8f0fc;
  --r-green:      #2e7d32;
  --r-green-light:#e8f5e9;
  --r-violet:     #4a148c;
  --r-violet-light:#ede7f6;
  --r-orange:     #e65100;
  --r-orange-light:#fff3e0;
  --r-red:        #c62828;
  --r-grey-100:   #f5f6f8;
  --r-grey-200:   #e4e8f0;
  --r-grey-600:   #5a6a8a;
  --r-text:       #1a2540;
  --r-radius:     6px;
  --r-font:       inherit;
  --r-transition: .18s ease;
}

/* ══════════════════════════════════════════
   RESET & WRAPPER
══════════════════════════════════════════ */
.hx-ressources-wrap * { box-sizing: border-box; }
.hx-ressources-wrap a { color: inherit; text-decoration: none; }
.hx-ressources-wrap a:hover { color: var(--r-blue); }
.hx-ressources-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hx-ressources-wrap { font-family: var(--r-font); color: var(--r-text); background: #f2f4f8; }

/* ══════════════════════════════════════════
   BARRE TRENDING NOW
══════════════════════════════════════════ */
.hx-res-ticker {
  background: #fff;
  border-bottom: 1px solid var(--r-grey-200);
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  height: 36px;
}
.hx-res-ticker__label {
  background: var(--r-blue);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 0 .9rem;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.hx-res-ticker__track {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.hx-res-ticker__inner {
  display: flex;
  gap: 2rem;
  animation: hx-ticker 30s linear infinite;
  white-space: nowrap;
}
.hx-res-ticker__inner:hover { animation-play-state: paused; }
.hx-res-ticker__item {
  font-size: .78rem;
  color: var(--r-text);
  cursor: pointer;
  transition: color var(--r-transition);
  flex-shrink: 0;
}
.hx-res-ticker__item:hover { color: var(--r-blue); }
.hx-res-ticker__item::before {
  content: '◆';
  font-size: .4rem;
  margin-right: .5rem;
  color: var(--r-blue);
  vertical-align: middle;
}
@keyframes hx-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════
   NAVIGATION CATÉGORIES
══════════════════════════════════════════ */
.hx-res-nav {
  background: #0055b1;
  position: sticky;
  top: 0;
  z-index: 300;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.hx-res-nav__inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0;
}
.hx-res-nav__item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .75rem 1rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255,255,255,.8);
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  text-decoration: none;
}
.hx-res-nav__item:hover,
.hx-res-nav__item.active {
  color: #fff;
  border-bottom-color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.12);
}
.hx-res-nav__item--doc.active  { border-bottom-color: #e8f0fc; }
.hx-res-nav__item--pro.active  { border-bottom-color: #e8f0fc; }
.hx-res-nav__item--news.active { border-bottom-color: #e8f0fc; }
.hx-res-nav__search {
  margin-left: auto;
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  padding: .5rem;
  font-size: 1.1rem;
  transition: color .15s;
}
.hx-res-nav__search:hover { color: #fff; }

/* ══════════════════════════════════════════
   LAYOUT PRINCIPAL
══════════════════════════════════════════ */
.hx-res-page {
  max-width: 1260px;
  margin: 0 auto;
  padding: 1.5rem;
}
.hx-res-2col {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.5rem;
  align-items: start;
}

/* ══════════════════════════════════════════
   SECTION HERO (bandeau principal)
══════════════════════════════════════════ */
.hx-res-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  height: 420px;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  overflow: hidden;
}
/* Article principal (gauche) */
.hx-res-hero__main {
  position: relative;
  grid-row: 1 / 3;
  overflow: hidden;
  cursor: pointer;
}
.hx-res-hero__main img {
  height: 100%;
  transition: transform .4s ease;
}
.hx-res-hero__main:hover img { transform: scale(1.03); }
.hx-res-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 55%, transparent 100%);
}
.hx-res-hero__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem 1.1rem;
  color: #fff;
}
.hx-res-hero__cat {
  display: inline-block;
  background: var(--r-blue);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .15rem .5rem;
  border-radius: 3px;
  margin-bottom: .5rem;
}
.hx-res-hero__title {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 .4rem;
  color: #fff;
}
.hx-res-hero__meta {
  font-size: .72rem;
  opacity: .8;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Articles secondaires (grille 2×2 droite) */
.hx-res-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
}
.hx-res-hero__card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.hx-res-hero__card img { height: 100%; min-height: 140px; transition: transform .3s ease; }
.hx-res-hero__card:hover img { transform: scale(1.04); }
.hx-res-hero__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 60%);
}
.hx-res-hero__card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: .65rem .7rem;
  color: #fff;
}
.hx-res-hero__card-cat {
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .85;
  margin-bottom: .25rem;
}
.hx-res-hero__card-title {
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ══════════════════════════════════════════
   BADGE DE SECTION
══════════════════════════════════════════ */
.hx-res-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .85rem;
  gap: .75rem;
}
.hx-res-section-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .25rem .75rem;
  border-radius: 3px;
  border-left: 4px solid;
  background: var(--r-grey-100);
  color: var(--r-text);
  border-left-color: var(--r-blue);
}
.hx-res-section-badge--doc  { border-left-color: var(--r-green); color: var(--r-green); background: var(--r-green-light); }
.hx-res-section-badge--pro  { border-left-color: var(--r-violet); color: var(--r-violet); background: var(--r-violet-light); }
.hx-res-section-badge--news { border-left-color: var(--r-red); color: var(--r-red); background: #ffeaea; }
.hx-res-section-badge--sf   { border-left-color: var(--r-orange); color: var(--r-orange); background: var(--r-orange-light); }
.hx-res-section-badge--all  { border-left-color: var(--r-blue); color: var(--r-blue); background: var(--r-blue-light); }

.hx-res-section-viewall {
  font-size: .75rem;
  font-weight: 700;
  color: var(--r-blue);
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  white-space: nowrap;
  transition: color var(--r-transition);
}
.hx-res-section-viewall:hover { color: var(--r-blue-dark); }
.hx-res-section-select {
  font-size: .72rem;
  border: 1px solid var(--r-grey-200);
  border-radius: 4px;
  padding: .2rem .45rem;
  background: #fff;
  color: var(--r-grey-600);
  cursor: pointer;
}

.hx-res-section { margin-bottom: 2rem; }
.hx-res-section hr {
  border: none;
  border-top: 2px solid var(--r-grey-200);
  margin-bottom: 1.25rem;
}

/* ══════════════════════════════════════════
   LAYOUT SECTION : vedette gauche + liste droite
══════════════════════════════════════════ */
.hx-res-feat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
/* Article vedette */
.hx-res-feat {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--r-radius);
}
.hx-res-feat__img { height: 260px; transition: transform .35s ease; }
.hx-res-feat:hover .hx-res-feat__img { transform: scale(1.03); }
.hx-res-feat__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, transparent 55%);
  border-radius: var(--r-radius);
}
.hx-res-feat__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  color: #fff;
}
.hx-res-feat__cat {
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .3rem;
  opacity: .9;
}
.hx-res-feat__title {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 .4rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hx-res-feat__meta {
  font-size: .68rem;
  opacity: .75;
  display: flex;
  gap: .5rem;
}

/* Liste d'articles (côté droit) */
.hx-res-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hx-res-list__item {
  display: flex;
  gap: .7rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--r-grey-200);
  cursor: pointer;
  transition: background var(--r-transition);
  align-items: flex-start;
}
.hx-res-list__item:first-child { padding-top: 0; }
.hx-res-list__item:last-child { border-bottom: none; }
.hx-res-list__item:hover .hx-res-list__title { color: var(--r-blue); }
.hx-res-list__thumb {
  width: 80px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}
.hx-res-list__thumb img { height: 100%; }
.hx-res-list__body { flex: 1; min-width: 0; }
.hx-res-list__cat {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--r-blue);
  margin-bottom: .2rem;
  display: block;
}
.hx-res-list__title {
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 .25rem;
  color: var(--r-text);
  transition: color var(--r-transition);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hx-res-list__meta { font-size: .65rem; color: var(--r-grey-600); }

/* ══════════════════════════════════════════
   GRILLE DE CARTES (procédés, don't miss…)
══════════════════════════════════════════ */
.hx-res-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}
.hx-res-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
}
.hx-res-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
.hx-res-card {
  background: #fff;
  border-radius: var(--r-radius);
  overflow: hidden;
  border: 1px solid var(--r-grey-200);
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
  display: flex;
  flex-direction: column;
}
.hx-res-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.1);
  transform: translateY(-2px);
}
.hx-res-card__img { height: 140px; flex-shrink: 0; overflow: hidden; }
.hx-res-card__img img { height: 100%; transition: transform .3s ease; }
.hx-res-card:hover .hx-res-card__img img { transform: scale(1.05); }
.hx-res-card__body { padding: .75rem; flex: 1; display: flex; flex-direction: column; gap: .3rem; }
.hx-res-card__cat { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--r-blue); }
.hx-res-card__title {
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--r-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hx-res-card:hover .hx-res-card__title { color: var(--r-blue); }
.hx-res-card__meta { font-size: .65rem; color: var(--r-grey-600); margin-top: auto; padding-top: .3rem; }
.hx-res-card__excerpt {
  font-size: .75rem;
  color: var(--r-grey-600);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ══════════════════════════════════════════
   CARTE GRANDE (liste + article vedette)
══════════════════════════════════════════ */
.hx-res-card--large {
  grid-column: span 2;
  flex-direction: row;
}
.hx-res-card--large .hx-res-card__img { height: auto; width: 220px; flex-shrink: 0; }
.hx-res-card--large .hx-res-card__img img { height: 100%; width: 100%; }

/* ══════════════════════════════════════════
   DON'T MISS — section horizontale
══════════════════════════════════════════ */
.hx-res-dontmiss {
  background: #fff;
  border: 1px solid var(--r-grey-200);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.hx-res-dontmiss__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hx-res-dontmiss__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--r-grey-200);
  cursor: pointer;
}
.hx-res-dontmiss__item:last-child { border-bottom: none; padding-bottom: 0; }
.hx-res-dontmiss__item:first-child { padding-top: 0; }
.hx-res-dontmiss__title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--r-text);
  transition: color var(--r-transition);
  line-height: 1.35;
}
.hx-res-dontmiss__item:hover .hx-res-dontmiss__title { color: var(--r-blue); }
.hx-res-dontmiss__meta { font-size: .68rem; color: var(--r-grey-600); white-space: nowrap; }
.hx-res-dontmiss__author { font-size: .7rem; font-weight: 600; color: var(--r-blue); white-space: nowrap; }

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
.hx-res-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }

/* Widget */
.hx-res-widget {
  background: #fff;
  border: 1px solid var(--r-grey-200);
  border-radius: 8px;
  overflow: hidden;
}
.hx-res-widget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 1rem;
  background: var(--r-grey-100);
  border-bottom: 1px solid var(--r-grey-200);
}
.hx-res-widget__title {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--r-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.hx-res-widget__select {
  font-size: .7rem;
  border: 1px solid var(--r-grey-200);
  border-radius: 3px;
  padding: .15rem .3rem;
  background: #fff;
  color: var(--r-grey-600);
  cursor: pointer;
}
.hx-res-widget__body { padding: .85rem; }

/* Widget liste populaire */
.hx-res-popular__item {
  display: flex;
  gap: .6rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--r-grey-200);
  align-items: flex-start;
  cursor: pointer;
}
.hx-res-popular__item:last-child { border-bottom: none; padding-bottom: 0; }
.hx-res-popular__item:first-child { padding-top: 0; }
.hx-res-popular__thumb {
  width: 64px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.hx-res-popular__thumb img { height: 100%; }
.hx-res-popular__body { flex: 1; }
.hx-res-popular__title {
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--r-text);
  margin: 0 0 .2rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--r-transition);
}
.hx-res-popular__item:hover .hx-res-popular__title { color: var(--r-blue); }
.hx-res-popular__meta { font-size: .62rem; color: var(--r-grey-600); }

/* Widget vidéo (iframe/thumbnail) */
.hx-res-video-thumb {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: .7rem;
  cursor: pointer;
}
.hx-res-video-thumb img { height: 100%; }
.hx-res-video-thumb__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.hx-res-video-thumb:hover .hx-res-video-thumb__overlay { background: rgba(0,0,0,.5); }
.hx-res-video-play {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--r-text);
  transition: transform .2s;
}
.hx-res-video-thumb:hover .hx-res-video-play { transform: scale(1.1); }
.hx-res-video-duration {
  position: absolute;
  bottom: .4rem;
  right: .4rem;
  background: rgba(0,0,0,.75);
  color: #fff;
  font-size: .62rem;
  padding: .1rem .3rem;
  border-radius: 3px;
}

/* Widget tags */
.hx-res-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .85rem;
}
.hx-res-tag {
  display: inline-block;
  padding: .25rem .65rem;
  border: 1px solid var(--r-grey-200);
  border-radius: 3px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--r-grey-600);
  background: var(--r-grey-100);
  cursor: pointer;
  transition: all .15s;
}
.hx-res-tag:hover { background: var(--r-blue); color: #fff; border-color: var(--r-blue); }

/* Publicité/CTA sidebar */
.hx-res-promo {
  background: linear-gradient(135deg, var(--r-blue) 0%, var(--r-blue-dark) 100%);
  color: #fff;
  border-radius: 8px;
  padding: 1.25rem 1rem;
  text-align: center;
}
.hx-res-promo__title { font-size: 1.1rem; font-weight: 800; margin: 0 0 .3rem; }
.hx-res-promo__sub { font-size: .78rem; opacity: .85; margin: 0 0 .9rem; line-height: 1.5; }
.hx-res-promo__btn {
  display: inline-block;
  background: #fff;
  color: var(--r-blue);
  font-size: .8rem;
  font-weight: 800;
  padding: .5rem 1.2rem;
  border-radius: 4px;
  transition: background .15s, color .15s;
}
.hx-res-promo__btn:hover { background: var(--r-blue-light); }

/* ══════════════════════════════════════════
   BADGE NUMÉRO (top articles)
══════════════════════════════════════════ */
.hx-res-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--r-blue);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   BREADCRUMB PAGE
══════════════════════════════════════════ */
.hx-res-breadcrumb {
  max-width: 1260px;
  margin: 0 auto;
  padding: .75rem 1.5rem .25rem;
  font-size: .75rem;
  color: var(--r-grey-600);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.hx-res-breadcrumb a { color: var(--r-blue); text-decoration: none; }
.hx-res-breadcrumb a:hover { text-decoration: underline; }
.hx-res-breadcrumb__sep { font-size: .6rem; }

/* ══════════════════════════════════════════
   SEARCH OVERLAY
══════════════════════════════════════════ */
.hx-res-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 100px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.hx-res-search-overlay.open { opacity: 1; pointer-events: auto; }
.hx-res-search-box {
  background: #fff;
  border-radius: 8px;
  width: min(600px, 90vw);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.hx-res-search-box input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1.1rem;
  font-family: inherit;
  color: var(--r-text);
}
.hx-res-search-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.3rem;
  color: var(--r-grey-600);
  padding: .2rem;
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1100px) {
  .hx-res-2col { grid-template-columns: 1fr 260px; }
}
@media (max-width: 900px) {
  .hx-res-2col { grid-template-columns: 1fr; }
  .hx-res-sidebar { display: none; } /* masqué sur mobile */
  .hx-res-hero { grid-template-columns: 1fr; height: auto; }
  .hx-res-hero__main { grid-row: 1; height: 280px; }
  .hx-res-hero__grid { grid-template-columns: 1fr 1fr; }
  .hx-res-grid-3 { grid-template-columns: 1fr 1fr; }
  .hx-res-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .hx-res-page { padding: 1rem; }
  .hx-res-feat-row { grid-template-columns: 1fr; }
  .hx-res-feat__img { height: 200px; }
  .hx-res-hero__grid { grid-template-columns: 1fr; }
  .hx-res-grid-3, .hx-res-grid-4, .hx-res-grid-2 { grid-template-columns: 1fr; }
  .hx-res-hero { height: auto; }
  .hx-res-hero__main { height: 240px; }
}