.main-container {
    padding: 11px;
}

.project_hero {
    margin-bottom: 20px;
}

.project_hero img {
    width: 100%;
    
}

.project-title {
    font-family: 'VD-LOGO-JR-STD-BK';
    color: var(--main-black);
    font-size: 30px;
    line-height: 35px;
    margin: 0;
    margin-bottom: 40px;
    letter-spacing: -0.01em;
    word-spacing: .15em;
}

.project-info-grid {
    display: grid;

    /* background-color: pink; */

    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    row-gap: 15px;
    column-gap: 15px;

    margin-bottom: 40px;
}


.small-toothpick {
    margin-bottom: 5px;
}

    .small-toothpick-text-area {
        padding-bottom: 4px;
        padding-right: 90px;
    }

.small-toothpick-bar {
    background-color: var(--main-grey);
    height: 5px;
}

.project-info-item {
    /* background-color: green; */
}

.summary {
    grid-column: 1;
    grid-row: 1;
}

.specs {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.project-specs-item {
    display: flex;
}

.specs-item-left {
    background-color: var(--main-grey);
    width: 150px;
    padding: 8px 0 5px 5px;

    color: white;
    font-family: 'ultraP';
    font-size: 15px;
}

.specs-item-right {
    margin: 0;
    color: var(--main-black);
    border-bottom: dotted var(--main-grey) 3px;
    font-family: 'ultraP';
    padding: 8px 0 2px 10px;
    font-size: 15px;
    line-height: 20px;
}

.software-icons {
    font-family: 'portwebcons';
    font-size: 30px;
    line-height: 20px;
}

.tasks {
    grid-column: span 2;
}

.project-paragraph {
    font-family: 'VD-LOGO-STD-B';
    font-size: 13px;
    line-height: 23px;
    color: var(--main-black);
    padding: 0 9px;
    margin: 0;
}

.tasks-lists {
    display: flex;
}

.tasks-lists ul {
    padding-left: 15px;
    /* list-style-position: inside; */
    margin: 0;
    width: 100%;
}

.tasks-lists li {
    /* background-color: red; */
    font-family: 'VD-LOGO-STD-B';
    font-size: 13px;
    line-height: 23px;
    color: var(--main-black);
    /* background-color: pink; */
    padding-left: 3px;
}

.proportional-image-row {
    display: flex;
    /* background-color: green; */
    width: 100%;
    gap: 15px;
    margin-bottom: 15px;
}

.proportional-image-row:last-of-type {
    margin-bottom: 0;
}

.proportional-image-wrapper {
    position: relative;
}

.proportional-image {
    display: block;
    flex: none;
    /* opacity: 50%; */
    margin: 0;

    width: 100%;
    height: 100%;
}

.img-notch {
    position: absolute;
    height: 18px;
    top: 0;
    right: 0;
}

/* vvv BREAKPOINT vvv */
@media (max-width: 479px) {

    .proportional-image-row {
        flex-direction: column;
        gap: 8px;
        /* background-color: red; */
    }

    .proportional-image-row img:not(.img-notch) {
        width: 100%;
    }
    


    .project-info-grid {

    background-color: pink;

    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    }
}