.wpn-module {
    padding: 3rem;
}

.wpn-module img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.wpn-module--spctop-none {
    padding-top: 0;
}

.wpn-module--spcbtm-none {
    padding-bottom: 0;
}

.wpn-module--spctop-small {
    padding-top: 2rem;
}

.wpn-module--spcbtm-small {
    padding-bottom: 2rem;
}

.wpn-module--spctop-large {
    padding-top: 5rem;
}

.wpn-module--spcbtm-large {
    padding-bottom: 5rem;
}

.wpn-module--spctop-xlarge {
    padding-top: 8rem;
}

.wpn-module--spcbtm-xlarge {
    padding-bottom: 8rem;
}

.wpn-module img.lazy,
.more-work img.lazy {
    transition: 150ms ease-in-out opacity;
    image-rendering: pixelated;
    object-fit: fill;
}

.wpn-module img.lazy.loaded,
.more-work img.lazy.loaded {
    image-rendering: auto;
}

.wpn-module img,
.more-work img {
    margin-bottom: 0;
    display: block;
}

@supports(--css: variables) {
    .wpn-module [style*="--ar"] {
        position: relative;
    }

    .wpn-module [style*="--ar"]::before {
        content: "";
        display: block;
        padding-bottom: calc(100% / (var(--ar)));
    }

    .wpn-module [style*="--ar"] > img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }
}