:root {
    --marginGrid: 30px;
}



.pageContent--workThumbnails {
    overflow: hidden;
}


.preamble {
    margin-top: 60px;
    margin-bottom: 60px;
    max-width: 100%;
    line-height: 2.2rem;
}

.preamble > A {
    font-family: 'HelveticaBold';
    color: var(--mainTextColor);
    text-decoration: none;
}

@media only screen and (min-width: 640px) {
    .preamble {
        margin-bottom: 90px;
    }
}


h2.preamble span {
    font-family: 'HelveticaBold';
    font-size: 4.4rem;
    line-height: 120%;
    font-weight: normal;
}

@media only screen and (min-width: 640px) {
    h2.preamble span {
        font-family: 'HelveticaBold';
        font-size: 4.4rem;
        line-height: 120%;
    }
}


/* -------------------  .workThumbnail  -------------------- */


.workThumbnail {
    float: left;
    position: relative;
    width: 100%;
    margin-bottom: calc(var(--marginGrid) - 5px);
}

@media only screen and (min-width: 640px) {
    .workThumbnail {
    }
}

@media (min-width: 640px) {
    .workThumbnail {
        width: calc((100% -  var(--marginGrid)) / 2);
    }
}

@media (min-width: 961px) {
    .workThumbnail {
        width: calc((100% -  var(--marginGrid) * 2) / 3);
    }
}

@media (min-width: 961px) {
    .workThumbnail:nth-child(3n - 1) {
        margin-left: var(--marginGrid);
        margin-right: var(--marginGrid);
    }
}

@media (min-width: 640px) and (max-width: 960px) {
    .workThumbnail:nth-child(2n - 1) {
        margin-right: var(--marginGrid);
    }
}




/* -------------------  .workThumbnail--thumbnail  -------------------- */




.workThumbnail--thumbnail {
    margin-bottom: 5px;
    width: 100%;
    position: relative;
}

@media only screen and (min-width: 640px) {
    .workThumbnail--thumbnail {
    }
}

.workThumbnail--thumbnail IMG {
    width: 100%;
    height: auto;
}


/* -------------------  .workThumbnail SPAN  -------------------- */

@media only screen and (min-width: 640px) {
    .workThumbnail--projectInformation {
    }
}

.workThumbnail SPAN {
    font-size: 1rem;
    line-height: normal;
    font-family: 'HelveticaThin';
}

.workThumbnail A {
    color: var(--mainTextColor);
    text-decoration: none;
}

.workThumbnail A:hover {
    color: var(--menuLinkHoverColor);
}

@media only screen and (min-width: 640px) {
    .workThumbnail SPAN {
        font-size: 1rem;
        line-height: 1.6875rem;
        margin-top: -6px;
    }
}


.workThumbnail--title {
    /*font-weight: bold;*/
}

/*.workThumbnail--title::after {
    content: " - ";
}*/

.workThumbnail--subtitle::before {
    content: " – ";
}


/* -------------------  for #bottomBlock two columns  -------------------- */

@media (min-width: 640px) and (max-width: 960px) {
    #bottomBlock > div > div:first-child {
        width: calc(50% + var(--marginGrid) / 2);
    }

    #bottomBlock > div > div:last-child {
        width: calc(50% - var(--marginGrid) / 2);
    }
}