section.works
{
    background-color: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
}

section.works > h1
{
    text-align: center;
    font-size:clamp(4rem, 9vw, 9rem);
    color: #000;
    margin-top: 5rem;
    padding-top: 7rem;
}

section.works > h1 > span
{
    font-family: var(--mono);
}




section.works > div.featured_work
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    padding: 2rem 0;
    background-color: var(--pistachio);
    cursor: pointer;
}

section.works > div.featured_work > a > h1
{
    padding: 0;
    color: #000;
}

section.works > div.featured_work > a > h4
{
    font-family: var(--mono);
    font-size: var(--smallFontSize);
    font-weight: normal;
    padding: 0;
}

section.works > div.featured_work > a > p
{
    font-family: var(--mono);
    font-size: var(--xsmallFontSize);
}

section.works > div.featured_work > a > h4.date
{
    font-size: var(--xsmallFontSize);
}

section.works > div.featured_work > a > h4.type
{
    font-family: var(--display);
    font-weight: normal;
}

section.works > div.featured_work > img
{
    max-width: 100%;
    width: 400px;
}

section.works > div.featured_work > img.left_image
{
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}

section.works > div.featured_work > img.right_image
{
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
}

@media only screen and (max-width : 1050px)
{
    section.works > div.featured_work
    {
        flex-direction: column;
        padding: 2rem;
    }

    section.works > div.featured_work > img.left_image
    {
        border-radius: 20px;
        clip-path: none;
    }

    section.works > div.featured_work > img.right_image
    {
        display: none;
    }
}






section.works > div.grid h1
{
    font-family: var(--mono);
    font-size: var(--xsmallFontSize);
    color: #000;
    padding: 0;
    padding-top: 0.25rem;
}

section.works > div.grid h1 sup
{
    color: #000;
}

section.works > div.grid h4
{
    font-family: var(--mono);
    font-size: var(--xsmallFontSize);
    color: #999;
    font-weight: normal;
    padding: 0.25rem 0;
}

section.works > div.grid h4.type
{
    font-family: var(--display);
    font-size: calc(var(--xsmallFontSize) + 0.5rem);
    line-height: calc(var(--xsmallFontSize) + 0.5rem);
    color: #000;
    font-weight: normal;
}

section.works > div.grid a
{
    font-family: var(--mono);
    font-size: calc(var(--xsmallFontSize));
    color: #000;
}

.grid {
display: flex;
flex-wrap: wrap;
padding: 3rem 0;
gap: 2rem;
justify-content: center;
}

.grid div
{
    padding: 2rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    transition: background-color 0.25s ease;
    transform-style: preserve-3d;
}

.grid div:hover
{
    background-color: var(--pistachio);
}

.grid div img
{
    border-radius: 50%;
    height: 100px;
    transform: perspective(1000px) translateZ(20px);
}

/* https://codepen.io/MdOS/pen/bGBGEa */

@media only screen 
and (min-width : 150px) 
and (max-width : 320px) {
    .grid div
    {
        flex-basis: 100%;
    }
}

/* Just smartphones */
@media only screen 
and (min-width : 320px) 
and (max-width : 480px) {
    .grid div
    {
        flex-basis: 100%;
    }
}

/* Tablets and iPads */
@media only screen 
and (min-width : 480px) 
and (max-width : 1024px) {
    .grid div
    {
        flex-basis: 50%;
    }
}

/* Laptops */
@media only screen and (min-width : 1224px) {
    .grid div
    {
        flex-basis: 25%;
    }
}

/* Desktops (with large screens) */
@media only screen and (min-width : 1824px) {
    .grid div
    {
        flex-basis: 20%;
    }
}







@media only screen and (orientation: portrait)
{
    section.works > h1
    {
        font-size: 2.5rem;
        padding-top: 3rem;
    }
}