.project {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding: 7px;
    margin: 35px 3.5%;
}

.description {
    font-weight: 400;
    padding: 2.5px 3.5% 1.5px 0.05%;
}

.description-image {
    display: flex;
    justify-content: center;
    /*              min, prefered, max */
    font-size: clamp(6px, 16px, 20px);
    font-weight: 300;
}

.repository,
.website {
    width: calc(1em + 14px);
    height: calc(1em + 14px);
    padding: 7.5px 10px;
    margin-right: 5px;
}

.icon-holder {
    /* Kept display: flex; due to strange line in the projectWebsite.svg icon*/
    display: flex;
    margin: -12.5px 0 0 20px;
}

@media only screen and (min-width: 1200px) {
    .project {
        max-width: 2200px;
        grid-template-columns: 1fr 1.2fr;
        margin: 35px 8%;
    }

    .description {
        padding: 5px 5.5% 2.5px 2.5%;
    }

    .mobile-image {
        display: none;
        visibility: hidden;
    }

    .image-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        visibility: visible;
        margin: 5px;
    }

    .image {
        width: clamp(250px, 700px, 95%);
        height: auto;
    }
}