@import url("font.css");

/*stickyyy*/
@media (min-width: 769px) {
    body {
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
}
/* Bilder Grundeinstellung */
.project-img img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
}
@media (min-width: 769px) {
    .project-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        column-gap: var(--grid-gap);
        padding: 0 var(--page-padding);
        margin-top: 10vh;
        margin-bottom: 20vh;
        position: relative;
        align-items: start;
    }
    .project-info {
        grid-column: 2 / 5;
        position: -webkit-sticky;
        position: sticky;
        top: 5rem;
        align-self: start;
        margin-bottom: 5rem;
        height: fit-content;
    }
    .project-title {
        font-family: var(--font-main);
        font-size: var(--text-size);
        font-weight: bold;
        text-transform: uppercase;
        line-height: var(--line-height);
        margin-top: 0;
        margin-bottom: 3rem;
        color: var(--text-color);
    }
    .project-description {
        font-family: var(--font-main);
        font-size: var(--text-size);
        line-height: var(--line-height);
        max-width: 110%;
        color: var(--text-color);
    }
    .project-img {
        grid-column: 6 / 12;
        margin: 0;
        margin-bottom: 15vh;
    }
    /* 1/letztes bild Desktop */
    .project-img:first-of-type {
        grid-column: 6 / 10;
        margin-bottom: 25vh;
    }
    .project-img:last-of-type {
        grid-column: 6 / 10;
        margin-bottom: 0;
    }
}
@media (max-width: 768px) {
    .project-grid {
        display: flex;
        flex-direction: column;
        margin-top: 2rem;
        margin-bottom: 5rem;
        width: 100%;
        padding: 0 1.5rem;
        box-sizing: border-box;
    }
    .project-info {
        display: contents;
    }
    .project-title {
        font-family: var(--font-main);
        font-size: var(--text-size);
        font-weight: bold;
        text-transform: uppercase;
        line-height: var(--line-height);
        color: var(--text-color);
        margin: 0;
        margin-bottom: 2rem;
        order: 1;
    }
    .project-img {
        width: 100%;
        margin: 0;
        margin-bottom: 6rem;
        order: 2;
        grid-column: unset !important;
    }
    /* erstes u letztes Bild: Kleiner (60%) */
    .project-img:first-of-type,
    .project-img:last-of-type {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 6rem;
    }
    .project-description {
        font-family: var(--font-main);
        font-size: 0.9rem;
        line-height: var(--line-height);
        color: var(--text-color);
        margin-top: 2rem;
        order: 3;
    }
}