.featured {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 4dvw;
    padding-bottom: 4dvw;
    &::before {
        background: url("../images/featuredBG.jpg") center center/cover no-repeat;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        filter: brightness(0.3) blur(.3dvw);
        z-index: -1;
        scale: 1.01;
    }

    h2 {
        font-size: 3dvw;
        transition: all .3s ease-in-out;
        background: url("../images/text-bg2.png") center;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        position: relative;
        filter: hue-rotate(0deg);

        &::after {
            content: "Featured Works";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("../images/text-bg2.png") center;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            filter: blur(.5dvw) brightness(1.5);
            z-index: -1;
        }
        @media (max-width: 1080px) and (orientation: portrait) {
            font-size: 7dvw;
        }
    }

    p {
        font-size: 1.5dvw;
        transition: all .3s ease-in-out;
        z-index: 1;
        position: relative;
        @media (max-width: 1080px) and (orientation: portrait) {
            font-size: 4dvw;
        }
    }

}

.featuredContainer {
    margin-top: 10rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 1.5vw;
    width: 60%;
    justify-items: center;
    @media (max-width: 1080px) and (orientation: portrait) {
        grid-template-columns: repeat(2, 1fr);
        gap: 1dvw;
        width: 95%;
    }
}

.featuredContainerText {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    width: 60%;
    gap: 1.5vw;
    text-align: center;
    margin-bottom: 2vw;
    @media (max-width: 1080px) and (orientation: portrait) {
        width: 85%;
    }
}

.featuredWorkContainer {
    width: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 1dvw rgba(0, 0, 0, 0.3);
    background: #039fbb;
    transition: all .3s ease;
    padding: 1vw;
    mix-blend-mode:color-dodge;
    &:hover {
        box-shadow: 0 0 1.5dvw #039fbb;
        mix-blend-mode: normal;
         background: #039fbb2e;
    }
    @media (max-width: 1080px) and (orientation: portrait) {
        padding: 4vw;
    }

    .artworkExpandButton {
        margin-top: auto;
        align-self: flex-end;
        background: url("../images/button-bg.png") center center/cover no-repeat;
        color: black;
        text-shadow: 0 0 .5dvw black;
        border: none;
        padding: 0.5dvw 1dvw;
        font-size: 0.9dvw;
        font-weight: bold;
        transition: all 0.3s ease;
        z-index: 5;
        mix-blend-mode: normal;

        &:hover {
            &::before {
                filter: brightness(1.2);
                content: "";
                position: fixed;
                top: 0;
                right: 0;
                width: 100%;
                height: 100%;
                background: url("../images/button-bg.png") center center/cover no-repeat;
                z-index: -1;
            }
        }

        @media (max-width: 1080px) and (orientation: portrait) {
            font-size: 3dvw;
            padding: 2dvw 4dvw;
        }
    }
}

.artworkImageContainer {
    width: 100%;
    aspect-ratio: 4/5;
    overflow: hidden;
    margin-bottom: 1dvw;
}

.artworkImage {
    width: 100%;
    height: 100%;
    filter: hue-rotate(0deg);
    object-fit: cover;
    transition: transform 0.5s ease;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.featuredWorkContainer:hover .artworkImage {
    transform: scale(1.05);
}

.artworkDetails {
    display: flex;
    flex-direction: column;
    gap: 0.5dvw;
    text-align: left;
}

.artworkDetails h3 {
    font-size: .9vw;
    color: #ff8ea1;
    @media (max-width: 1080px) and (orientation: portrait) {
        font-size: 5dvw;
    }
}

.artworkDetails p {
    color: yellow;
    font-size: .75vw;
    font-weight: bold;
    line-height: 1.4;
    @media (max-width: 1080px) and (orientation: portrait) {
        font-size: 3dvw;
    }
}

.artworkDetails .artworkDate {
    font-size: .75vw;
    color: #fff;
    @media (max-width: 1080px) and (orientation: portrait) {
        font-size: 3dvw;
    }
}

.artworkDetails .artworkMaterials {
    font-weight: bold;
    font-size: .75vw;
    color: #fff;
    @media (max-width: 1080px) and (orientation: portrait) {
        font-size: 3dvw;
    }
}

.featuredWorkContainer3, .featuredWorkContainer13 { 
    grid-column: span 2;
    grid-row: span 2; 
    aspect-ratio: 3/5;
}
@media (max-width: 1080px) and (orientation: portrait) {
    .featuredWorkContainer2, .featuredWorkContainer14 {
        grid-row: span 2; 
        grid-column: span 2;
        aspect-ratio: 3/5;
    }
}

.featuredWorkContainer6,.featuredWorkContainer15, .featuredWorkContainer9, .featuredWorkContainer1, .featuredWorkContainer10, .featuredWorkContainer18 { 
    grid-column: span 2;
    aspect-ratio: 6/5;
    @media (max-width: 1080px) and (orientation: portrait) {
        aspect-ratio: 1/1;
    }
}

.artworkExpandedOverlay {
    inset: 0;
    margin: 0;
    position: fixed;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow-x: hidden;
    .artworkExpandedContainer {
        width: 90dvw;
        height: 90dvh;
        overflow-y: auto;
        background: #039fbb2e;
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 2.5dvw;
        box-sizing: border-box;
        border-radius: 1dvw;
        gap: 4dvw;

        @media (max-width: 1080px) and (orientation: portrait) {
            flex-direction: column;
            justify-content: flex-start;
            padding: 8dvw 4dvw;
        }
    }

    .artworkExpandedCloseButton {
        align-self: flex-start;
        top: 2dvw;
        left: 2dvw;
        background: url("../images/button-bg.png") center center/cover no-repeat;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000;
        width: 3dvw;
        height: 3dvw;
        mix-blend-mode: color-dodge;
        padding: 0;
        aspect-ratio: 1 / 1;
        transition: all 0.3s ease;
        z-index: 10001;
        border-radius: 50%;

        svg {
            height: 55%;
            width: auto;
            stroke: black;
            filter: drop-shadow(0 0 .5dvw black);
            display: block;
        }

        &:hover {
            filter: brightness(1.2);
            transform: scale(1.1);
        }

        @media (max-width: 1080px) and (orientation: portrait) {
            width: 12dvw;
            height: 12dvw;
            top: 4dvw;
            left: 4dvw;
        }
    }

    .artworkExpandedImageContainer {
        width: 100%;
        height: auto;
        flex-shrink: 1;
        max-height: 80dvh;
        align-content: flex-end;
        display: flex;
        justify-content: flex-end;

        .artworkExpandedImage {
            max-width: 100%;
            max-height: 80dvh;
            object-fit: contain;
            user-select: none;
            -webkit-user-drag: none;
        }

        @media (max-width: 1080px) and (orientation: portrait) {
            width: 100%;
            max-height: 60dvh;
            margin-top: 2dvh;

            .artworkExpandedImage {
                max-height: 60dvh;
            }
        }
    }

    .artworkExpandedDetails {
        width: 40%;
        max-width: 100%;
        text-align: left;
        display: flex;

        flex-direction: column;
        gap: 1dvh;
        flex-shrink: 0;
        .artworkExpandedTitle {
            font-size: 2.5dvw;
            color: #ff8ea1;

            @media (max-width: 1080px) and (orientation: portrait) {
                font-size: 7dvw;
            }
        }

        .artworkExpandedDate, .artworkExpandedMaterials {
            font-size: 1dvw;
            color: #fff;
            font-weight: bold;

            @media (max-width: 1080px) and (orientation: portrait) {
                font-size: 4dvw;
            }
        }

        .artworkExpandedDescription {
            font-size: 1.2dvw;
            color: yellow;
            font-weight: bold;
            line-height: 1.4;
            margin-top: 1dvh;

            @media (max-width: 1080px) and (orientation: portrait) {
                font-size: 4.5dvw;
            }
        }

        .artworkExpandedDownloadButton {
            margin-top: 4dvh;
            margin-bottom: 2dvh;
            align-self: flex-start;
            background: url("../images/button-bg.png") center center/cover no-repeat;
            color: black;
            text-shadow: 0 0 .5dvw black;
            text-decoration: none;
            padding: 0.8dvw 1.5dvw;
            font-size: 1dvw;
            font-weight: bold;
            &::before {
                filter: drop-shadow(0 0 .5dvw pink);
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: url("../images/button-bg.png") center center/cover no-repeat;
                scale: 1.1;
                z-index: -1;
            }

            border-radius: 0.2dvw;
            transition: all 0.3s ease;
            width: fit-content;
            &:hover {
                transform: scale(1.2);
            }
            @media (max-width: 1080px) and (orientation: portrait) {
                align-self: center;
                width: 90%;
                padding: 3dvw 0;
                font-size: 5dvw;
                text-align: center;
                &:hover {
                    transform: scale(1.05);
                }
            }

        }

        @media (max-width: 1080px) and (orientation: portrait) {
            width: 100%;
            text-align: center;
            margin-top: 2dvh;
        }
    }
}