body {
  /* height: 100vh; */
  min-height: 100vh;
  /* max-height: 100vh; */
  overflow-x: hidden;
}

#header-ird {
  min-height: 20vh;
  height: 20%;
  position: relative;
}
#footer-ird {
  height: 15%;
}

section {
  background-image: url('./images/background.png');
  background-size: cover;
  background-repeat: no-repeat;
}

#section-index {
  height: 65%;
}

#sub-banner {
  background-image: url('./images/bandeau.png');
  background-size: cover;
  color: #fff;
  font-size: x-large;
  min-height: 5vh;
}

.text-xs {
  font-size: small;
}

.p-10 {
  padding: 0 10vw;
}

.m-w-logo {
  max-width: 200px;
}

.capsules-container {
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
}

.capsules-container > * {
  flex: 0 0 calc(33.33% - 5vw);
}

.capsules-container > .larger {
  flex: 0 0 calc(50% - 5vw);

}

.hex {
  max-width: 20vw;
  max-height: 33vh;
  aspect-ratio: 1/1;
  color: #fff;
  display:flex;
  align-items: center;
  justify-items: center;
}

.hex img {
  flex-grow: 1;
  max-width: 40vh;
}

@supports not (aspect-ratio:1/1) { 
  .hex {
    width: 330vw;
    height: 30vw;
    max-height: 30vw;
  }
}

.lower {
  font-size: medium;
}

.footer-central {
  background:orange;
  border-radius:12px;
  color:white;
}

.footer-central a {
  color:white;
  font-weight: bold;
  text-decoration: none;
}


.footer-central a:hover {
  text-decoration: underline;
}

@media only screen and (max-width : 768px) {
  
  .capsules-container {
    display:block;
  }

  .hex {
    max-width: 80vw;
    max-height: 80vh;
  }

  .hex img {
    max-width: 80vh;
  }

  @supports not (aspect-ratio:1/1) { 
    .hex {
      width: 90vw;
      height: 90vw;
      max-height: 90vw;
    }
  }
}