main section:first-of-type{
    background-image: url(../images/prerafaelites/prerafaelites.jpg);
}

/* Het Begin */
section:nth-of-type(2){
    display: grid;
    grid-template-columns: 1.65fr 1fr;
    gap: 2em;
    & p {
        grid-column: 1;
    }
    & div {
        grid-column: 2;
        grid-row: 2;
    }
    & ol {
        & li{
            list-style: upper-roman;
            margin-left: 2.5em;
        }
    }
}

/* Inspiratie */
section:nth-of-type(3){
    position: relative;
    display: grid;
    gap: 5em;
    & .inspiratie-carousel{
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        gap: 1000px;
        padding: 1em;
        scroll-snap-type: x mandatory;
        padding-left: calc(50% - 500px);
        padding-right: calc(50% - 500px);
    }
    & div.inspiratieblok{
        flex: 0 0 min(1000px, 100%);
        scroll-snap-align: center;
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2em;
        & p:first-of-type{
            font-style: italic;
            font-size: 1.1em;
            opacity: 0.8;
            align-self: center;
        }
        & p:last-of-type{
            grid-column: span 2;
        }
        & img{
            width: 13em;
            height: 17em;
            object-fit: cover;
            place-self: end;
        }
    }
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.carousel-btn {
  width: 2.5em;
  height: 2.5em;
  border-radius: 50%;
  background: var(--secondary-color);
  font-size: 1.5em;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 50%;
  z-index: 10;
  color: var(--main-color-light);
}

.carousel-btn:hover {
  background: var(--main-color-dark);
  color: white;
}

.carousel-btn.prev {
  left: 5%;
}

.carousel-btn.next {
  right: 5%;
}



/* connectie waterhouse */
section:nth-of-type(4){
    display: grid;
    gap: 2em;
    grid-template-columns: 1.5fr 1fr;
    & h2{
        grid-column: span 2;
    }
    & p{
        grid-column: 1;
    }
    & p:first-of-type{
        align-self: end;
    }
    & .bijschrift{
        grid-column: 2;
        justify-self: center;
    }
    & img{
        grid-column: 2;
        grid-row: 2 / span 2;
        align-self: end;
        justify-self: center;
        max-height: 50vh;
    }
}