html {
  --logo-size: clamp(250px, 13vw, 300px);
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* Font classes */
.font-josefin-sans {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

.font-cursive {
  font-family: "Dancing Script", cursive;
  font-weight: 100;
}

.font-body {
  font-family: "Montserrat", sans-serif;
  font-size: 1.3rem;
}

.line-height {
  line-height: 1.7;
}

/* Body grid */
body {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(12, auto);
  row-gap: 2rem;
  grid-template-areas:
    "header header header header header"
    ". . welcome . ."
    ". . welcome2 . ."
    ". . deco1 . ."
    ". . offriamo . ."
    ". . intro . ."
    ". . cards . ."
    ". . deco2 . ."
    ". . tiaspett . ."
    ". . contattaci . ."
    ". . contattaci2 . ."
    "footer footer footer footer footer";
}

header {
    grid-area: header;
    display: grid;
    grid-template-columns: 0.5fr auto 0 auto 0.5fr;
    grid-template-areas: ". logo . titles .";
}
header > *,
footer > * {
  z-index: 1;
}
footer {
  grid-area: footer;
  display: grid;
  position: relative;
  grid-template-columns: 2rem auto 2rem auto 5rem auto 1fr;
  grid-template-areas: ". logo . contatti . orari .";
  border-top: 1px solid green;
  /* column-gap: 4rem; */
}
footer p {
  line-height: 1.7;
}
footer::before {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 35%,
    rgba(255, 255, 255, 0)
  );
}
.orari {
  padding-top: 1rem;
  grid-area: orari;
}
.maps {
  display: block;
  margin-top: 0.8rem;
  width: 50px;
  position: relative;
  grid-column: 2/3;
  grid-row: 2/3;
}
.maps > img {
  width: 100%;
}

.signature {
  text-align: right;
  color: green;
  font-size: 2.3rem;
  padding-bottom: 3rem;
}
.contatti {
  padding-top: 1rem;
  grid-area: contatti;
}
.benvenuto {
  grid-area: welcome;
}
.benvenuto2 {
  grid-area: welcome2;
}
.deco1 {
  grid-area: deco1;
}
.deco2 {
  grid-area: deco2;
}
.offriamo {
  grid-area: offriamo;
}
.intro {
  grid-area: intro;
}

.cards {
  display: grid;
  grid-area: cards;
  grid-template-columns: 1fr auto auto auto 1fr;
  grid-template-areas: ". card1 card2 card3 .";
  column-gap: clamp(0.5rem, 20vw, 8rem);
}
.tiaspett {
  grid-area: tiaspett;
}
.contattaci {
  grid-area: contattaci;
}
.contattaci2 {
  grid-area: contattaci2;
}

.card1 {
  grid-area: card1;
}
.card2 {
  grid-area: card2;
}
.card3 {
  grid-area: card3;
}

header,
footer {
  position: relative;
  overflow: hidden;
}

.img-bg {
  height: clamp(200px, 13vw, 300px);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
footer > div.img-bg {
  background: linear-gradient(
      to top,
      rgba(255, 255, 255, 0) -4vw,
      rgba(255, 255, 255, 1)
    ),
    url("media/header-bg.webp");
}
header > div.img-bg {
  background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) -2vw,
      rgba(255, 255, 255, 1)
    ),
    url("media/header-bg.webp");
}

.border-bottom {
  border-bottom: 1px solid green;
}

.logo {
  width: var(--logo-size);
  grid-area: logo;
}

.header-titles {
  grid-area: titles;
  padding: 2rem 0 1rem 0;
}

.font-size-big {
  font-size: clamp(3rem, 13vw, 5rem);
  /* font-size: 13vw; */
  /* font-size: 6rem; */
}

/* .header-letter-spacing { */
  /* letter-spacing: clamp(0rem, 1vw, 2rem); */
  /* letter-spacing: clamp(0rem, 0.2vw, 2rem); */
/* } */

.header-size-small {
  font-size: clamp(1rem, 2vw, 3rem);
}

.center {
  text-align: center;
}

.leaf {
  box-sizing: content-box;
  transform: rotate(48deg) scaleX(-1);
  width: 1.7rem;
  background-color: white;
  padding: 1rem;
}

.leaf-container {
  text-align: center;
  position: relative;
}

.leaf-container::after {
  content: "";
  left: 0;
  bottom: 2.6rem;
  position: absolute;
  border-bottom: 1px solid rgb(156, 156, 156);
  width: 100%;
  z-index: -1;
}

.underline {
  text-decoration: underline;
}

.card {
  border: green solid 2px;
  background: rgba(150, 221, 150, 0.1);
  border-radius: 0.8rem 4rem;
  width: 12rem;
  height: 15rem;
  justify-self: center;
  padding: 1.1rem;
  text-transform: uppercase;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
}

@media screen and (max-width: 1035px) {
  html {
    --logo-size: 190px;
    --footer-margin-bottom: 1.5rem;
  }
  body {
    grid-template-areas:
      "header header header header header"
      ". welcome welcome welcome ."
      ". welcome2 welcome2 welcome2 ."
      ". deco1 deco1 deco1 ."
      ". offriamo offriamo offriamo ."
      ". intro intro intro ."
      ". cards cards cards ."
      ". deco2 deco2 deco2 ."
      ". tiaspett tiaspett tiaspett ."
      ". contattaci contattaci contattaci ."
      ". contattaci2 contattaci2 contattaci2 ."
      "footer footer footer footer footer";
    grid-template-rows: repeat(14, auto);
    grid-template-columns: 1fr auto auto auto 1fr;
    row-gap: 1rem;
  }
  .offriamo {
    text-align: center;
  }
  header {
    grid-template-columns: 0.25fr 1fr 0.25fr;
    grid-template-rows: 1fr auto auto;
    grid-template-areas:
      ". . ."
      ". logo ."
      "titles titles titles";
    justify-items: center;
  }

  .header-titles {
    text-align: center;
  }
  .header-titles > h1{
    font-size: 4em;
  }
  .cards {
    grid-area: cards;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      ". card1 ."
      ". card2 ."
      ". card3 .";
    justify-items: center;
    row-gap: 2rem;
    padding-top: 1rem;
  }
  footer {
    grid-area: footer;
    display: grid;
    position: relative;
    grid-template-columns: 2rem auto 2rem;
    grid-template-areas:
      ". logo ."
      ". contatti ."
      ". orari .";
    border-top: 1px solid green;
    /* column-gap: 4rem; */
    justify-items: center;
  }
  .contatti > * {
    text-align: center;
    margin-bottom: 0.8rem;
  }
  .contatti > :first-child {
    margin-bottom: var(--footer-margin-bottom);
  }
  .contatti > :last-child {
    margin-top: 1rem;
  }
  .orari > * {
    text-align: center;
    margin-bottom: 0.8rem;
  }
  .orari > :first-child {
    margin-bottom: var(--footer-margin-bottom);
  }
  .dovesiamo {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    justify-items: center;
  }
  footer p {
    line-height: 1;
  }
  p,
  h3 {
    text-align: center;
  }
  footer > div.img-bg {
    background: 
    linear-gradient(
        to top,
        rgba(255, 255, 255, 1) 1%,
        rgba(255, 255, 255, 0) 30%
      ),
      linear-gradient(to top,
        rgba(255, 255, 255, 0) -4vw,
        rgba(255, 255, 255, 1)
      ),
      url("media/header-bg.webp");
  }
  .contattaci2{
    padding-right: 2rem;
  }
.card {
    border: green solid 7px;
    background: rgba(150, 221, 150, 0.1);
    border-radius: 0.8rem 4rem;
    width: 50vw;
    height: 70vw;
    justify-self: center;
    padding: 1.1rem;
    text-transform: uppercase;
    text-align: center;
    font-size: 2.5vw;
    font-weight: 700;
}
}