/* =========================
   Home shared panels
   ========================= */

.home-shared-modules {
  width: 100%;
  margin: 0;

  display: grid;
  grid-template-columns: 1fr 1fr;

  overflow: hidden;
}

.home-shared-panel {
  --home-p: 0;

  height: 400px;
  padding: 2.2rem 2rem;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;

  transition: opacity 0.2s linear;
  will-change: transform, opacity;
}

.home-shared-panel-left {
  transform:
    translateX(calc(-90px + (90px * var(--home-p))))
    translateY(calc(16px - (16px * var(--home-p))));
  opacity: calc(0.7 + (var(--home-p) * 0.3));
}

.home-shared-panel-right {
  transform:
    translateX(calc(90px - (90px * var(--home-p))))
    translateY(calc(16px - (16px * var(--home-p))));
  opacity: calc(0.7 + (var(--home-p) * 0.3));
}

.home-shared-panel--gaia {
  background: #19d88e ;
  background-color: #19d88e ;
}

.home-shared-panel--news {
  background: #dc143c ;
  background-color: #dc143c ;
}

.home-shared-panel__inner {
  max-width: 560px;
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}

.home-shared-panel__media img {
  height: 48px;
  width: auto;
  display: inline-block;
}

.home-shared-panel h2 {
  margin: 0;

  color: #fff;
  font-family: var(--font-heading, "Space Grotesk", sans-serif);
  font-size: clamp(2rem, 4.2vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  text-transform: lowercase;
}

.home-shared-panel__text p {
  max-width: 520px;
  margin: 0;

  font-size: 1.2rem;
  line-height: 1.35;
  text-align: center;
}

.home-shared-panel--gaia .home-shared-panel__text p {
  color: #000 ;
}

.home-shared-panel--news .home-shared-panel__text p {
  color: #fff;
}



.home-shared-btn--light {
  color: #fff  ;
  border-color: #fff  ;
}

.home-shared-btn--light:hover {
  background: #fff  ;
  color: #dc143c  ;
  border-color: #fff  ;
}

@media (max-width: 980px) {
  .home-shared-modules {
    grid-template-columns: 1fr;
    overflow-x: clip;
  }

  .home-shared-panel {
    height: auto;
    min-height: 340px;
  }

  .home-shared-btn {
    width: min(340px, 100%);
  }
}