/* web/themes/custom/uccle/css/component/infos-home.css */

.home-infos {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.home-infos .site-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  max-width: 100%;
}

/* Carte */
.home-info {
  flex: 1;
  padding: 64px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 1ère carte */
.home-info:nth-child(1) {
  background: #003b63;
  color: #ffffff;
  text-align: right;
}

/* 2ème carte */
.home-info:nth-child(2) {
  background: #f6f2ec;
  color: #003b63;
  text-align: left;
}

/* Petit titre */
.home-info-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--brand-accent);
}

.home-info:nth-child(1) .home-info-eyebrow {
  color: #8db7da;
}

/* Titre */
.home-info-title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.2;
}

/* Description */
.home-info-desc {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 30px;
  color: inherit;
}

/* Bouton */
.home-info-button {
  width: 300px;
}
/* bouton de la première carte */
.home-info:nth-child(1) .home-info-button {
  align-self: flex-end;
}

/* bouton de la deuxième carte */
.home-info:nth-child(2) .home-info-button {
  align-self: flex-start;
}

/* Responsive */
@media (max-width: 768px) {
  .home-infos .site-inner {
    grid-template-columns: 1fr;
  }

  .home-info,
  .home-info:nth-child(1),
  .home-info:nth-child(2) {
    text-align: left;
    padding: 45px 24px;
  }
}