/* trial-banner.css: ported 1:1 from foodforjoe.es CSS modules (hash suffixes removed). */

/* ── TrialBanner ── */
.TrialBanner_trialBanner {
  overflow:hidden;
  position:relative;
  padding-top:45px;
  min-height:505px;
  background:linear-gradient(90deg,#c3c1b6,#c3c1b6 49%,#e0d7cc 50%,#e0d7cc);
}

.TrialBanner_image {
  z-index:0;
  position:absolute;
  width:auto;
  bottom:0;
  left:-330px;
  top:0;
  height:100%;
}

.TrialBanner_content {
  position:relative;
}

.TrialBanner_title {
  text-align:center;
  background-color:rgba(8, 56, 59,.9);
  color:var(--color-white);
  font-size:20px;
  padding:20px;
  margin-bottom:10px;
}

.TrialBanner_buttons {
  padding:0;
  display:flex;
  width:100%;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  flex-flow:column-reverse;
}

.TrialBanner_buttons>* {
  flex:1 1;
  width:100%;
  max-width:320px;
}

@media (min-width:960px) {
  .TrialBanner_image {
    top:0;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
  }
}

@media (min-width:960px) {
  .TrialBanner_trialBanner {
    padding-top:88px;
    padding-bottom:74px;
    min-height:505px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
}

@media (min-width:960px) {
  .TrialBanner_content {
    display:flex;
    position:relative;
    height:100%;
  }
}

@media (min-width:960px) {
  .TrialBanner_text {
    margin-left:auto;
    max-width:40%;
    overflow:hidden;
    text-overflow:clip;
  }
}

@media (min-width:960px) {
  .TrialBanner_title {
    text-align:left;
    font-size:35px;
    margin-bottom:30px;
    background:none;
    color:var(--color-green);
    padding:0;
  }
}

@media (min-width:960px) {
  .TrialBanner_buttons {
    width:100%;
    overflow:hidden;
    justify-content:left;
    flex-wrap:wrap;
    margin:0;
    column-gap:20px;
    row-gap:15px;
    flex-direction:row-reverse;
    flex-flow:wrap-reverse;
  }
}

@media (min-width:960px) {
  .TrialBanner_buttons>* {
    flex:0 0 fit-content;
  }
}