/* copié dans index */


.bonsplans-grid {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); */
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 28px ; grid-auto-rows: 1fr;
}
.bonsplans-grid > a { aspect-ratio: 3/4;}

.bonplan-box {  display: flex; flex-direction: column; background-size: cover; background-position: center center; border-radius: 8px; overflow: hidden; }
.bonplan-box article { width: 100%; aspect-ratio: 3/4; display: flex; flex-direction: column; justify-content: end; align-items: stretch; }

.bonplan-box article > div { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: end; align-items: stretch;  }
.bonplan-box article > div h4 { min-height: 96px; font-size: 1.25rem; color: white; }
.bonplan-box article > div p { display: block; font-size: 0.8rem; padding: 16px; margin: 0; background-color: #eeec; min-height: 80px; transition: all 300ms ease; }
.bonplan-box article > div i { position: absolute; bottom: 4px; right: 16px; opacity: 0; transition: all 300ms ease; color: white; font-size: 28px;}

.bonsplans-grid > a:hover p { color: white; background-color: #eee4; }
.bonsplans-grid > a:hover i { right: 4px; opacity: 1;  }


.menu-archiv-bplan { outline: 0px solid red; }
.menu-archiv-bplan nav {width: 100%; border-top: 1px solid #CCC; background-color: white; max-height: 400px; overflow-y: auto}
.menu-archiv-bplan nav a {display: flex; flex-direction: column; border-bottom: 1px solid #CCC; background-color: whitesmoke; padding: 4px 4px 4px 16px; }
.menu-archiv-bplan nav a:hover { background-color: white; }







.styled-select {
   width: 60%;
   height: 36px;
   overflow: hidden;
   background: url(../../images/select-arrow-down.png) no-repeat right #ddd; background-size: contain;
   border: 4px solid orangered;
   background-color: white;
   border-radius: 18px;
   }



.styled-select select {

   background: transparent;
   width: 100%;
   padding: 8px 0px;
   font-size: 16px;
   line-height: 2.0;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;

	font-size: 14px;
   cursor: pointer;
   margin: -6px 0 0 12px;


/*   background: #f1f1f1 linear-gradient(to right, white 0%, white 100%) ; */

}