body {
    background-color: darkgray;
}

.header {
    font-family: Arial;
    font-size: calc(2.5vw);
    font-weight: bold;
    text-align: center;
}

section.project-preview {
    display: grid;
    grid-template-rows: auto;
    margin: 1.2vw 0 0 0;
    grid-template-columns: 25% 25% 25% 25%;
}

section div {
    background-color: lightgray;
    width: 1fr;
    height: calc(25 * 1vw);
    margin: calc(0.5vw);
    border: 2px solid;
    border-radius: 10px;
}

.image-holder {
    vertical-align: top;
    max-width: 80%;
    max-height: 50%;
    align-content: center;
    border: none;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
}

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.preview-header {
    font-family: Arial;
    font-size: calc(1.5vw);
    font-weight: bold;
    text-align: center;
    margin-top: calc(0.5vw);
    margin-bottom: calc(0.5vw);
}

.preview-paragraph {
    font-family: Arial;
    font-size: calc(1.3vw);
    margin-top: calc(0.5vw);
    margin-left: calc(0.5vw);
    margin-right: calc(0.5vw);
    margin-bottom: calc(0.5vw);
}

.button-holder {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: calc(0.5vw);
    margin-left: auto;
    margin-right: auto;
    border: none;
    height: calc(2vw);
}

button {
    background-color: lightgray;
    color: rebeccapurple;
    border-style: solid;
    border-radius: 10px;
    border-color: rebeccapurple;
    border-width: 2px;
    cursor: pointer;
    font-size: calc(1vw);
    font-weight: bold;
    transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
    font-family: Arial;
    white-space: normal;
    height: calc(2vw);
}

    button:hover {
        background-color: rebeccapurple;
        color: lightgray;
        border-color: lightgray;
    }

.smallbutton {
    width: calc(10vw);
}

.bigbutton {
    width: calc(16vw);
}

section.threewide {
    display: grid;
    grid-template-rows: auto;
    margin: 2vw 0 0 0;
    grid-template-columns: 33% 34% 33%;
    border: none;
}

    section.threewide div {
        background-color: darkgray;
        vertical-align: top;
        width: 1fr;
        height: calc(22vw);
        align-content: center;
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
        border: none;
    }

section.fourwide {
    display: grid;
    grid-template-rows: auto;
    margin: 2vw 0 0 0;
    grid-template-columns: 25% 25% 25% 25%;
    border: none;
}

    section.fourwide div {
        background-color: darkgray;
        vertical-align: top;
        width: 1fr;
        height: calc(22vw);
        align-content: center;
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
        border: none;
    }

section.descriptive {
    background-color: darkgray;
    display: grid;
    gap: 20px;
    margin: 0 0 calc(5vw) 0;
    grid-template-columns: repeat(2, 1fr);
    height: auto;
    border: none;
}
    div.first-image {
        background-color: darkgray;
        margin: 0 0 0 0;
        width: 100%;
        height: auto;
        border: none;
    }

    div.descriptive-images {
        background-color: darkgray;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        margin: 0 0 0 0;
        height: auto;
        gap: 10px;
        border: none;
    }

    div.descriptive-text {
        background-color: lightgray;
        margin: calc(1vw) calc(1vw) 0 0;
        height: fit-content;
        font-family: Arial;
        font-size: calc(1.3vw);
    }

    div.descriptive-text p {
        margin: calc(0.5vw);
    }