/*Grid */
.grid_1-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.grid_1-1-1-1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 4fr 1fr;
}

/* Customize siden*/

img {
  max-width: 100%;
  height: auto;
  border-radius: 0px;
}

body {
  background-image: url("../img/baggrund-pasta.webp");

  /* Fuld højde */
  height: 100%;

  /* Parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

h1 {
  text-align: center;
}

h2 {
  color: #0b2361;
  text-align: center;
  font-size: 2rem;
}

h3 {
  color: #0b2361;
  font-size: 2rem;
  place-self: center;
}

h4 {
  color: #0b2361;
  place-self: center;
}

p {
  color: #0b2361;
}

/*Store billede med tekst boks*/

@media (max-width: 500px) {
  .text-box {
    padding-inline: 15px;
  }

  .button-card {
    padding-top: 30px;
  }

  h1 {
    color: #0b2361;
  }

  .text-box {
    display: grid;
    background-color: white;
    margin-bottom: -80px;
    padding-top: 50px;
  }

  .text-box > h1 {
    padding-top: 10px;
    border-top: 2px solid #0b2361;
  }

  .text-box > p {
    padding-bottom: 30px;
    border-bottom: 2px solid #0b2361;
  }

  .text-box > div {
    grid-column: 1;
    grid-row: 3;
  }

  .button-card {
    text-align: center;
  }
}

@media (min-width: 500px) {
  h1 {
    color: white;
  }

  .home_card {
    display: grid;
    padding-inline: 5px;
  }

  .home_card > * {
    grid-row: 1;
    grid-column: 1;
  }

  .text-box {
    place-self: center;
    background-color: #0b2361;
    border-radius: 5px;
    max-width: 60ch;
    padding: 30px;
  }

  .text-box {
    display: grid;
  }

  .text-box > div {
    grid-column: 1;
    grid-row: 3;
  }

  .button-card {
    text-align: center;
  }

  .text-box p {
    color: white;
  }

  p {
    font-size: 1.3rem;
  }
}

/*La fresca mål*/

.container {
  width: 100%;
  background: url(../img/forside_baggrund.webp);
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  padding-top: 200px;
  padding-bottom: 150px;
  border-bottom: 15px solid #0b2361;
}

.container > * {
  grid-column: 1;
  grid-row: 1;
}

.about_lafresca {
  place-self: center;
  max-width: 60ch;
  margin-top: 20px;
  padding-inline: 15px;
}

/*Din mads rejse*/

.grid_1-1-1-1 {
  background-color: white;
}

.grid_1-1-1-1 h2 {
  grid-column: 2 / span 2;
  padding-top: 30px;
}

.step1 {
  grid-column: 1;
  grid-row: 2;
  text-align: center;
}

.step2 {
  grid-column: 2;
  grid-row: 2;
  text-align: center;
}

.step3 {
  grid-column: 3;
  grid-row: 2;
  text-align: center;
}

.step4 {
  grid-column: 4;
  grid-row: 2;
  text-align: center;
}

.grid_1-1-1-1 button {
  grid-column: 2;
}

/*Stylling af knap under rejse*/

.container2 {
  width: 100%;
  background: url(../img/wave_home.webp);
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  padding-bottom: 270px;
}

.container2 > * {
  grid-column: 1;
  grid-row: 1;
}

.button2 {
  place-self: center;
  max-width: 60ch;
  margin-top: 20px;
}

/*Pasta og sauce bokse*/

.grid_1-1 {
  margin-top: 80px;
  margin-inline: 150px;
}

figure > img {
  width: 100%;
  height: auto;
}

figure {
  max-width: 50ch;
  margin-top: 40px;
  place-self: center;
  padding: 30px;
  background-color: white;
  border: 20px solid #f09844;
  display: grid;
}

@media (max-width: 900px) {
  .grid_1-1 {
    margin-inline: 70px;
  }

  figure {
    max-width: 50ch;
    margin-top: 40px;
    place-self: center;
    padding: 30px;
    background-color: white;
    border: 20px solid #f09844;
    display: grid;
    margin-inline: 30px;
  }
}

@media (max-width: 500px) {
  .grid_1-1 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    padding: 50px;
    margin-inline: 0px;
  }

  header {
    width: 100%;
    background-color: var(--header-color);
  }
}

@media (max-width: 850px) {
  .grid_1-1-1-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 2fr 2fr;
  }
  .grid_1-1-1-1 h2 {
    grid-column: 3 / span 2;
    padding-top: 50px;
  }

  .step1 {
    grid-column: 3;
    grid-row: 2;
    text-align: center;
  }

  .step2 {
    grid-column: 4;
    grid-row: 2;
    text-align: center;
  }

  .step3 {
    grid-column: 3;
    grid-row: 3;
    text-align: center;
  }

  .step4 {
    grid-column: 4;
    grid-row: 3;
    text-align: center;
  }
}

@media (max-width: 430px) {
  .grid_1-1-1-1 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 2fr 2fr 2fr;
  }

  .step1 {
    grid-column: 3 / span 2;
    grid-row: 2;
    text-align: center;
  }

  .step2 {
    grid-column: 3 / span 2;
    grid-row: 3;
    text-align: center;
  }

  .step3 {
    grid-column: 3 / span 2;
    grid-row: 4;
    text-align: center;
  }

  .step4 {
    grid-column: 3 / span 2;
    grid-row: 5;
    text-align: center;
  }

  a {
    font-size: 1rem;
    color: #0b2361;
  }

  a:visited {
    font-size: 1rem;
    color: #0b2361;
  }
}

footer p {
  color: white;
}

.footer a {
  color: white;
}