:root {
  --font-body: "Jost", system-ui, sans-serif;
  --font-title: "Caesura", "DM Serif Display", Georgia, serif;
}

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  background: #fff;
  color: #fff;
  font-family: var(--font-body);
  font-size: 2rem;
  line-height: 1.45;
}

.meds-row {
  row-gap: 0.2rem;
}

.meds-panel {
  position: relative;
  background: rgb(var(--base));
  text-align: center;
  padding: 4.5rem 2rem;
  --shade: 80%;
}
.meds-panel::selection {
  background-color: var(--accent);
  color: #fff;
}

.meds-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.meds-bg img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -3;
  width: 100%;
  height: var(--mh);
  object-fit: cover;
  object-position: var(--mx) var(--my);
}

.meds-bg::before,
.meds-bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.meds-bg::before {
  height: var(--shade);
  mix-blend-mode: multiply;
  background: linear-gradient(to bottom, #333, transparent);
  z-index: -2;
}

.meds-bg::after {
  bottom: 0;
  background: linear-gradient(rgba(var(--base), 0.37), rgb(var(--base)) 74.5%);
  z-index: -1;
}

.is-bouillon {
  --accent: #d69b22;
  --base: 63, 130, 150;
  --mx: 100%;
  --my: 64%;
  --mh: 73.4%;
  --lw: 15.66rem;
}

.is-meds {
  --accent: #ed1c24;
  --base: 51, 51, 51;
  --mx: 42.3%;
  --my: 50%;
  --mh: 94.1%;
  --lw: 10.6rem;
}

.is-traiteur {
  --accent: #bbd979;
  --base: 115, 114, 114;
  --mx: 12%;
  --my: 50%;
  --mh: 99%;
  --lw: 12.4rem;
}

.meds-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.meds-logo {
  height: 10.8rem;
  display: flex;
  align-items: center;
}

.meds-logo img {
  display: block;
  width: var(--lw);
  height: auto;
}
.meds-text p:first-child {
  margin: 2.6rem 0 0;
  font: 500 1.4rem/2rem var(--font-body);
  text-transform: uppercase;
  color: var(--accent);
}

.meds-text h2 {
  margin: 1.1rem 0 0;
  font: 700 3rem/1.2 var(--font-title);
  font-synthesis: none;
}

.meds-text p:not(:first-child) {
  margin: 1.2rem auto 0;
  font: 400 1.8rem/2.6rem var(--font-body);
}

.meds-btn {
  display: inline-block;
  margin-top: 3rem;
  padding: 0.24rem;
  border: 0.1rem solid var(--accent);
  border-radius: 50rem;
  text-decoration: none;
  color: #fff;
}

.meds-btn__fill {
  display: block;
  padding: 0 2.4rem;
  border-radius: 50rem;
  background: var(--accent);
  font: 500 1.3rem/3.36rem var(--font-body);
  text-transform: uppercase;
}

.meds-btn:hover .meds-btn__fill {
  filter: brightness(1.08);
}

a {
  transition: 0.3s;
}

.meds-social-row {
  display: flex;
  gap: 0.9rem;
  margin-top: 3rem;
}

.meds-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: #fff;
  color: var(--accent);
  text-decoration: none;
  font-size: 1.8rem;
}
.meds-social:hover {
  background-color: var(--accent);
  color: white;
}
.meds-ico {
  height: 1.48rem;
  width: auto;
  fill: currentColor;
}

.meds-btn:focus-visible,
.meds-social:focus-visible {
  outline: 0.3rem solid #fff;
  outline-offset: 0.3rem;
}

@media (min-width: 768px) {
  .meds-panel {
    --shade: 100%;
    padding: 8.4rem 2.5rem;
  }

  .is-bouillon {
    --mx: 50%;
    --lw: 20.08rem;
  }

  .is-meds {
    --lw: 17.5rem;
  }

  .is-traiteur {
    --lw: 20.08rem;
  }

  .is-bouillon,
  .is-meds,
  .is-traiteur {
    --mh: 100%;
  }

  .meds-content {
    display: grid;
    grid-template-columns: 32rem minmax(0, 54rem);
    grid-template-areas: "logo text" "social text";
    align-items: start;
    justify-items: stretch;
    padding: 0;
    text-align: left;
  }

  .meds-logo {
    grid-area: logo;
    height: auto;
    justify-self: center;
    width: 36rem;
    justify-content: center;
    align-items: flex-start;
  }
  .meds-text {
    grid-area: text;
  }

  .meds-text p:first-child {
    margin: 0;
    font-size: 2rem;
  }

  .meds-text h2 {
    margin-top: 1.5rem;
    font-size: 3.8rem;
  }

  .meds-text p:not(:first-child) {
    margin: 1.6rem 0 0;
    font-size: 2rem;
  }

  .meds-btn {
    margin-top: 4rem;
    padding: 0.4rem;
  }

  .meds-btn__fill {
    padding: 0 3.5rem;
    font-size: 2rem;
    line-height: 5rem;
  }

  .meds-social-row {
    grid-area: social;
    margin: 0;
    justify-self: center;
    width: 36rem;
    justify-content: center;
    gap: 1.5rem;
  }

  .meds-social {
    width: 5rem;
    height: 5rem;
    font-size: 2.2rem;
  }

  .meds-ico {
    height: 2.2rem;
  }
}

@media (min-width: 1200px) {
  .meds-panel {
    padding: 6.5rem 2rem;
    min-height: max(100vh, 84rem);
    text-align: center;
    --shade: 63.9%;
  }

  .is-bouillon {
    --mx: 57%;
    --my: 0;
    --mh: 73.4%;
    --lw: 25.8rem;
  }

  .is-meds {
    --mh: 75.3%;
  }

  .is-traiteur {
    --mh: 79%;
    --my: 0;
    --lw: 22.4rem;
  }

  .meds-panel + .meds-panel::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: -0.25rem;
    width: 0.5rem;
    background: #fff;
  }

  .meds-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .meds-logo,
  .is-traiteur .meds-logo {
    width: auto;
    height: 18rem;
    padding: 0;
    align-items: center;
    margin-bottom: 14.8rem;
  }

  .meds-text {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .meds-text h2 {
    margin-top: 1.4rem;
  }

  .meds-text p:not(:first-child) {
    margin: 2rem auto 0;
    max-width: 45.6rem;
    min-height: 11.6rem;
  }

  .meds-btn {
    margin-top: 5rem;
  }

  .meds-social-row {
    width: auto;
    padding: 0;
    margin-top: 3.9rem;
  }
}