main {
  /* Algemene sectie instellingen */
  section {
    padding: 3rem 1.5rem;
    display: grid;
    gap: 1.5rem;

    hgroup {
      display: grid;
      gap: 1.5rem;
    }

    /* Sectie 1: Hero */
    &:nth-of-type(1) {
      height: 100dvh;
      place-content: center;
      gap: 2.5rem;

      @media (min-width: 1100px) {
        text-align: center;
        justify-items: center;
      }

      img {
        width: 14rem;
      }

      h1 {
        max-width: 50rem;
        span {
          background: var(--navy-blue-color);
          color: var(--white-color);
          display: inline-block;
          padding: 0 0.5rem;
        }
      }
    }

    /* Sectie 2: Over ons */
    &:nth-of-type(2) {
      color: var(--white-color);
      background-color: var(--navy-blue-color);
      gap: 3rem;

      @media (min-width: 1100px) {
        display: flex;
        align-items: center;
        justify-content: space-around;
      }

      div {
        display: grid;
        gap: 1rem;
      }

      hgroup p span {
        background-color: var(--white-color);
        color: var(--navy-blue-color);
      }

      video {
        width: 100%;
        border-radius: var(--border-radius);
        max-width: 20rem;
      }
    }

    /* Sectie 3: Services */
    &:nth-of-type(3) {
      hgroup p {
        color: var(--navy-blue-color);
        span {
          background: var(--navy-blue-color);
          color: var(--white-color);
        }
      }

      div {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
      }

      article {
        background: var(--navy-blue-color);
        color: var(--white-color);
        border-radius: var(--border-radius);
        padding: 1.3rem;
        max-width: 25rem;
        position: relative;
        display: grid;
        gap: 1rem;

        &::after {
          position: absolute;
          top: 1rem;
          right: 1rem;
          font-size: var(--font-size-l);
          opacity: 0.5;
        }

        &:nth-of-type(1) {
          @media (max-width: 800px) {
            margin-top: 1rem;
          }

          &::after {
            content: "01";
          }
        }
        &:nth-of-type(2)::after {
          content: "02";
        }
        &:nth-of-type(3)::after {
          content: "03";
        }
        &:nth-of-type(4)::after {
          content: "04";
        }

        figure {
          position: relative;
          width: 100%;
          max-width: 500px;
          overflow: hidden;
        }

        figure img {
          width: 100%;
          display: block;
          border-radius: var(--border-radius);

          &:hover {
            /* animation-play-state: paused; */
          }
        }

        figure .dirty {
          animation: dirtySlider 6s infinite cubic-bezier(0.4, 0, 0.2, 1);
        }

        figure .clean {
          position: absolute;
          top: 0;
          left: 0;
          animation: cleanSlider 6s infinite cubic-bezier(0.4, 0, 0.2, 1);
        }
      }
    }

    /* Sectie 4: Offerte Formulier */
    &:nth-of-type(4) {
      background: var(--navy-blue-color);
      color: var(--white-color);

      hgroup p span {
        background: var(--white-color);
        color: var(--navy-blue-color);
      }

      form {
        display: grid;
        gap: 1.5rem;

        fieldset {
          padding: 1rem;
          display: grid;
          max-width: 30rem;
          border-radius: var(--border-radius);
          gap: 1rem;
          border: 1px solid rgba(255, 255, 255, 0.2);

          &:first-of-type {
            margin-top: 1rem;
          }

          label {
            display: grid;
            gap: 0.5rem;

            input {
              background: rgba(255, 255, 255, 0.15);
              border: 1px solid rgba(255, 255, 255, 0.2);
              color: white;
            }

            input:not([type="checkbox"]):not([type="radio"]) {
              padding: 0.6rem 0.5rem;
              border-radius: var(--border-radius);
              font-size: var(--font-size-s);
            }
          }

          .label-radio {
            display: flex;
            justify-content: space-between;
            align-items: center;

            input[type="checkbox"],
            input[type="radio"] {
              -webkit-transform: scale(1.5, 1.5);
              aspect-ratio: 1/1;
              border: none;
              outline: none;
              cursor: pointer;
            }
          }
        }

        .textarea-label {
          display: grid;
          gap: 1rem;
        }

        textarea {
          padding: 0.7rem 0.5rem;
          font-family: inherit;
          border-radius: var(--border-radius);
          min-height: 100px;

          background: rgba(255, 255, 255, 0.15);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: white;
        }

        button[type="submit"] {
          color: var(--black-color);
          border-radius: var(--border-radius);
          font-weight: 500;
          border: none;
          font-size: 1rem;
          width: max-content;
          padding: 0.8rem 2rem;
          cursor: pointer;
          background: var(--white-color);

          &:hover {
            opacity: 0.9;
          }
        }
      }
    }
  }

  /* Naar boven knop */
  #naarBovenKnop {
    border-radius: var(--border-radius);
    background: var(--pastel-gray-color);
    border: none;
    width: 3.5rem;
    aspect-ratio: 1;
    bottom: 1rem;
    right: 1rem;
    z-index: 10;
    position: fixed;
    cursor: pointer;
    display: grid;
    place-items: center;
  }

  /* Fotogallerij */
  .section-fotogallerij {
    padding: 3rem 1.5rem;
    display: grid;
    gap: 1.5rem;

    .carousel-slider {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      gap: 1rem;
      padding: 1rem 0;
      list-style: none;
      scrollbar-width: none;
    }

    .carousel-slider::-webkit-scrollbar {
      display: none;
    }

    .carousel-slider li {
      flex: 0 0 60%;
      scroll-snap-align: center;
    }

    .carousel-slider img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: var(--border-radius);
    }

    .carousel-nav {
      display: flex;
      gap: 1rem;
      margin-top: 1rem;
    }

    .carousel-nav button {
      background: black;
      color: white;
      border: none;
      touch-action: manipulation;
      width: 2.5rem;
      display: grid;
      place-content: center;
      aspect-ratio: 1/1;
      cursor: pointer;
      border-radius: var(--border-radius);
    }

    @media (min-width: 768px) {
      .carousel-slider li {
        flex: 0 0 calc(25% - 1rem);
      }
    }

    hgroup p {
      color: var(--navy-blue-color) !important;

      span {
        background: var(--navy-blue-color);
        color: var(--white-color);
      }
    }
  }
}

footer {
  background: var(--navy-blue-color);
  min-height: 50vh;
  color: var(--white-color);
  padding: 2rem 1rem;
  gap: 1rem;
  display: grid;

  ul {
    padding: 1rem 0;

    &:last-of-type {
      display: grid;
      text-align: center;
      gap: 0.4rem;
      font-size: 0.9rem;

      li {
        display: flex;
        justify-content: center;
        gap: 1rem;
      }
    }
  }

  iframe {
    height: 20rem;
    border-radius: var(--border-radius);
    width: 20rem;
  }

  img {
    width: 60%;
  }

  a {
    color: #8080a9;
  }
}