body{
  overflow: auto;
  flex-direction: column;
}

/*********************************************************************************************************************/



.grid {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 0px auto 50px auto 50px auto 50px;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
    "."
    "tarif_1"
    "."
    "tarif_2"
    "."
    "tarif_3"
    "."
    "tarif_4"
    ".";
    width: 100%;
    height: auto;
    padding: 10px;
}

.tarif {
    padding: 16px;
    border-radius: 15px;
    border: 1px solid var(--main-color-bleu);
}

.tarif_1 {
    grid-area: tarif_1;
}

.tarif_2 {
    grid-area: tarif_2;
}

.tarif_3 {
    grid-area: tarif_3;
}

.tarif_4 {
    grid-area: tarif_4;
}

.tarifTitre {
    font-weight: bold;
    font-size: 16px;
    opacity: 0.6;
}

.tarifPrix {
    font-weight: bold;
    font-size: 30px;
    transform: translateY(-20px);
    color: var(--main-color-navbar-bleu);
}

.tarifOption {
    padding-left: 16px;
    font-size: 16px;
}

.tarifText {
    font-size: 16px;
    padding-top: 16px;
}

.tarifChoit {
    font-size: 16px;
    padding-top: 60px;
    text-decoration: var(--main-color-bleu) underline;
}

@media screen and (min-width: 300px) {
    .grid {
        padding-right: 10%;
        padding-left: 10%;
    }
}

@media screen and (min-width: 950px) {
  .grid {
      display: grid;
      grid-template-columns: 50px auto 50px auto 50px;
      grid-template-rows: 0px auto 50px auto 50px ;
      gap: 0px 0px;
      grid-auto-flow: row;
      grid-template-areas:
      ". . . . ."
      ". tarif_1 . tarif_2 ."
      ". . . . ."
      ". tarif_3 . tarif_4 ."
      ". . . . .";
      width: 100%;
      height: auto;
      padding: 0px;
  }

}

@media screen and (min-width: 1600px) {
  .grid {
      display: grid;
      grid-template-columns: auto 15% 5% 15% 5% 15% 5% 15% auto;
      grid-template-rows: 100%;
      gap: 0px 0px;
      grid-auto-flow: row;
      grid-template-areas:
      ". tarif_1 . tarif_2 . tarif_3 . tarif_4 .";
      width: 100%;
      height: auto;
      padding: 0px;
  }

  .tarif {
      margin: auto;
      max-width: 248px;
      min-width: 248px;
      height: 320px
  }
}