/* =========================================================
   STRIDEDGE PORTFOLIO ARCHIVE
   ========================================================= */

.portfolio-archive {
    --portfolio-dark: #26343D;
    --portfolio-orange: #F58220;
    --portfolio-orange-dark: #D96B12;
    --portfolio-orange-light: #FFF0E3;
    --portfolio-bg: #F8F6F2;
    --portfolio-border: #E5E1DB;
    --portfolio-muted: #5F6B73;
    --portfolio-white: #FFFFFF;

    width: 100%;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.portfolio-container {
    width: min(
        1180px,
        calc(100vw - 40px)
    );

    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   FILTER BAR
   ========================================================= */

.portfolio-filter-wrap {
    position: sticky;

    top: 0;

    z-index: 80;

    background:
        rgba(248, 246, 242, 0.94);

    backdrop-filter: blur(14px);

    border-bottom:
        1px solid var(--portfolio-border);

    padding: 14px 0;
}


.portfolio-filters {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;
}


.portfolio-filter {
    appearance: none;

    border:
        1px solid var(--portfolio-border);

    background:
        var(--portfolio-white);

    color:
        var(--portfolio-muted);

    border-radius: 999px;

    padding:
        9px 14px;

    font-family: inherit;

    font-size: 11px;

    font-weight: 700;

    line-height: 1;

    cursor: pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.portfolio-filter:hover {
    border-color:
        var(--portfolio-orange);

    color:
        var(--portfolio-orange);

    transform:
        translateY(-1px);
}


.portfolio-filter.is-active {
    background:
        var(--portfolio-orange);

    border-color:
        var(--portfolio-orange);

    color:
        var(--portfolio-white);

    box-shadow:
        0 7px 20px
        rgba(245, 130, 32, .18);
}


/* SEARCH */

.portfolio-search {
    position: relative;

    margin-left: auto;
}


.portfolio-search span {
    position: absolute;

    left: 13px;

    top: 50%;

    transform:
        translateY(-50%);

    color:
        #8B969D;

    font-size: 16px;

    line-height: 1;

    pointer-events: none;
}


.portfolio-search input {
    width: 225px;

    height: 36px;

    padding:
        0 13px 0 34px;

    border:
        1px solid var(--portfolio-border);

    border-radius: 999px;

    background:
        var(--portfolio-white);

    color:
        var(--portfolio-dark);

    outline: none;

    font-family: inherit;

    font-size: 11px;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}


.portfolio-search input:focus {
    border-color:
        var(--portfolio-orange);

    box-shadow:
        0 0 0 3px
        rgba(245,130,32,.10);
}


.portfolio-search input::placeholder {
    color:
        #9BA3A8;
}


/* =========================================================
   PORTFOLIO CONTENT
   ========================================================= */

.portfolio-content-section {
    background:
        var(--portfolio-bg);

    padding:
        65px 0 90px;
}


/* HEADING */

.portfolio-heading {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 30px;
}


.portfolio-kicker {
    margin-bottom: 8px;

    color:
        var(--portfolio-orange);

    font-size: 9px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 1.7px;
}


.portfolio-heading h2 {
    margin: 0;

    color:
        var(--portfolio-dark);

    font-size: 39px;

    line-height: 1;

    letter-spacing: -2px;

    font-weight: 700;
}


.portfolio-heading p {
    max-width: 530px;

    margin: 0;

    color:
        var(--portfolio-muted);

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   12 COLUMN GRID
   ========================================================= */

.portfolio-grid {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    gap: 18px;

    /* Rows follow real content; cards in a row still stretch equally. */
    grid-auto-rows: minmax(min-content, max-content);

    align-items: stretch;
}


/*
 * The original design uses:
 *
 * 8 + 4
 * 4 + 8
 * 4 + 4 + 4
 * 4 + 4 + 8
 */

.portfolio-card {
    grid-column:
        span 4;
}


.portfolio-card.portfolio-wide {
    grid-column:
        span 8;
}


.portfolio-card.portfolio-normal {
    grid-column:
        span 4;
}


.portfolio-card.portfolio-tall {
    grid-column:
        span 4;
}


/* =========================================================
   CARD
   ========================================================= */

.portfolio-card {
    position: relative;

    display: flex;
    flex-direction: column;

    /*
     * Every card uses exactly the same height.
     */
    height: auto;
    min-height: 0;
    box-sizing: border-box;

    background: #FFFFFF;

    border: 1px solid #E5E1DB;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(38, 52, 61, 0.06);

    cursor: pointer;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


/*
 * IMPORTANT:
 * Do NOT define another .portfolio-grid here.
 *
 * The grid is the 12-column grid defined above.
 */


.portfolio-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0 22px 55px
        rgba(38,52,61,.13);

    border-color:
        #D9D0C7;
}


/* =========================================================
   CARD IMAGE
   ========================================================= */

/* IMAGE */

.portfolio-shot {
    position: relative;

    /*
     * Image height stays consistent across cards.
     * The card height itself remains content-driven.
     */
    height: 255px;
    min-height: 255px;
    flex: 0 0 255px;

    overflow: hidden;

    background:
        #E9E5DE;
}


.portfolio-image-slides {
    position: absolute;

    inset: 0;
}


.portfolio-slide {
    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    opacity: 0;

    transition:
        opacity .35s ease,
        transform .55s ease;
}


.portfolio-slide.is-active {
    opacity: 1;
}


.portfolio-card:hover
.portfolio-slide.is-active {
    transform:
        scale(1.045);
}


/* FALLBACK */

.portfolio-no-image {
    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--portfolio-dark);

    color:
        var(--portfolio-orange);

    font-size: 25px;

    font-weight: 800;
}


/* =========================================================
   IMAGE SHADE
   ========================================================= */

.portfolio-shade {
    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 42%,
            rgba(38,52,61,.82) 100%
        );

    opacity:
        .78;
}


/* =========================================================
   CARD TOP
   ========================================================= */

.portfolio-card-top {
    position: absolute;

    top: 15px;

    left: 15px;

    right: 15px;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;
}


/* CATEGORY PILL */

.portfolio-pill {
    display: inline-flex;

    align-items: center;

    max-width: 75%;

    padding:
        7px 9px;

    border-radius:
        7px;

    background:
        rgba(255,255,255,.94);

    color:
        var(--portfolio-orange);

    font-size: 9px;

    line-height: 1;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .7px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   ARROW
   ========================================================= */

.portfolio-arrow {
    width: 37px;

    height: 37px;

    flex: 0 0 37px;

    border: 0;

    border-radius: 50%;

    background:
        rgba(38,52,61,.76);

    color:
        var(--portfolio-white);

    display: grid;

    place-items: center;

    padding: 0;

    font-family: inherit;

    font-size: 17px;

    line-height: 1;

    cursor: pointer;

    opacity: 0;

    transform:
        translateY(-5px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        background .25s ease;
}


.portfolio-card:hover
.portfolio-arrow {
    opacity: 1;

    transform:
        translateY(0);
}


.portfolio-arrow:hover {
    background:
        var(--portfolio-orange);
}


/* =========================================================
   OVERLAY TITLE
   ========================================================= */

.portfolio-overlay-title {
    position: absolute;

    left: 19px;

    right: 19px;

    bottom: 17px;

    z-index: 4;

    color:
        var(--portfolio-white);
}


.portfolio-overlay-title h3 {
    margin:
        0 0 3px;

    color:
        var(--portfolio-white);

    font-size: 24px;

    line-height: 1.05;

    letter-spacing: -.8px;

    font-weight: 700;
}


.portfolio-overlay-title span {
    color:
        rgba(255,255,255,.80);

    font-size: 10px;

    line-height: 1.3;
}


/* =========================================================
   SLIDER DOTS
   ========================================================= */

.portfolio-slider-dots {
    position: absolute;

    left: 50%;

    bottom: 12px;

    z-index: 7;

    display: flex;

    align-items: center;

    gap: 5px;

    transform:
        translateX(-50%);
}


.portfolio-slider-dots button {
    width: 6px;

    height: 6px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255,255,255,.55);

    cursor: pointer;

    transition:
        width .25s ease,
        background .25s ease;
}


.portfolio-slider-dots button.is-active {
    width: 18px;

    border-radius: 20px;

    background:
        var(--portfolio-orange);
}


/* =========================================================
   CARD INFO
   ========================================================= */

.portfolio-card-info {
    display: flex;
    flex-direction: column;

    /*
     * The row height is determined by the content.
     * The card info area fills the stretched row so the
     * technology tag block can stay at the bottom.
     */
    flex: 1 1 auto;
    min-height: 0;
    box-sizing: border-box;

    padding:
        17px 19px 20px;

    overflow: visible;
}


.portfolio-card-info p {
    margin:
        0 0 10px;

    color:
        var(--portfolio-muted);

    font-size: 12px;

    line-height: 1.65;

    /*
     * Never crop the description.
     */
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
    overflow: visible;
}


/* =========================================================
   TAGS
   ========================================================= */

.portfolio-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    /*
     * Keep the tag block at the bottom of every card.
     * Any extra space from equal-height row stretching
     * stays between the description and the tags.
     */
    margin-top: auto;
    max-height: none;
    overflow: visible;
}


.portfolio-tags span {
    display: inline-flex;

    align-items: center;

    padding:
        6px 8px;

    border-radius:
        6px;

    background:
        var(--portfolio-orange-light);

    border:
        1px solid var(--portfolio-border);

    color:
        var(--portfolio-dark);

    font-size: 9px;

    line-height: 1;

    font-weight: 700;
}


/* =========================================================
   HIDDEN
   ========================================================= */

.portfolio-card.is-hidden {
    display: none;
}


.portfolio-filter-empty {
    display: none;

    width: 100%;
    min-height: 160px;
    box-sizing: border-box;

    text-align: center;

    padding:
        70px 0;

    color:
        var(--portfolio-muted);

    font-size: 13px;
}


.portfolio-empty {
    grid-column:
        1 / -1;

    text-align: center;

    padding:
        70px 0;

    color:
        var(--portfolio-muted);
}


/* =========================================================
   LOAD MORE
   ========================================================= */

.portfolio-load-more-wrap {
    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 30px;
}


.portfolio-load-more-btn {
    appearance: none;

    border: 0;

    border-radius: 10px;

    padding:
        13px 20px;

    background:
        var(--portfolio-orange);

    color:
        var(--portfolio-white);

    font-family: inherit;

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 8px 25px
        rgba(38,52,61,.08);

    transition:
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.portfolio-load-more-btn:hover {
    background:
        var(--portfolio-orange-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(38,52,61,.12);
}


.portfolio-load-more-btn:disabled {
    opacity: .65;

    cursor: wait;

    transform: none;
}


/* =========================================================
   MODAL
   ========================================================= */

.portfolio-modal {
    position: fixed;
    inset: 0;

    z-index: 999999;

    display: none;

    padding: 30px;

    overflow: hidden;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.portfolio-modal.is-open {
    display: flex;

    align-items: center;
    justify-content: center;
}

.portfolio-modal-backdrop {
    position: fixed;

    inset: 0;

    background:
        rgba(14,22,27,.72);

    backdrop-filter:
        blur(9px);
}

.portfolio-modal-box {
    position: relative;

    z-index: 2;

    width:
        min(1180px,96vw);

    height:
        min(820px,92vh);

    display: grid;

    grid-template-columns:
        57% 43%;

    overflow: hidden;

    border-radius:
        28px;

    background:
        #FFFFFF;

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.35);

    animation:
        portfolioModalIn .25s ease;
}

@keyframes portfolioModalIn {

    from {
        opacity: 0;

        transform:
            translateY(20px)
            scale(.98);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* =========================================================
   LEFT
   ========================================================= */

.portfolio-modal-left {
    position: relative;

    min-width: 0;

    background:
        #EEEAE4;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        56px 42px 42px;
}

.portfolio-modal-close {
    position: absolute;

    top:
        28px;

    right:
        34px;

    z-index:
        6;

    width:
        48px;

    height:
        48px;

    border:
        0;

    border-radius:
        50%;

    background:
        #555B61;

    color:
        #FFFFFF;

    font-size:
        28px;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        background .25s ease,
        transform .25s ease;
		padding: 0;
}

.portfolio-modal-close:hover {
    background:
        #FF7A18;
}

.portfolio-modal-visual-wrap {
    width:
        100%;

    max-width:
        720px;
}

.portfolio-modal-visual {
    position:
        relative;

    aspect-ratio:
        16 / 10;

    border-radius:
        17px;

    overflow:
        hidden;

    background:
        #FFFFFF;

    box-shadow:
        0 18px 38px
        rgba(26,30,35,.14);
}

.portfolio-modal-browser-bar {
    height:
        44px;

    background:
        #080F26;

    display:
        flex;

    align-items:
        center;

    padding:
        0 16px;

    gap:
        7px;
}

.portfolio-modal-dot {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #687083;
}

.portfolio-modal-url {
    height:
        18px;

    flex:
        1;

    margin-left:
        9px;

    border-radius:
        20px;

    background:
        rgba(255,255,255,.08);
}

.portfolio-modal-mock-site {
    height:
        calc(100% - 44px);

    background:
        #F8F8F8;

    position:
        relative;

    overflow:
        hidden;
}

.portfolio-modal-project-image {
    width:
        100%;
    height:
        100%;
    display:
        none;
    object-fit:
        cover;
    transition:
        opacity .2s ease;
    user-select:
        none;
    -webkit-user-drag:
        none;
    touch-action:
        pan-y;
}

.portfolio-modal-slider-arrow {
    position:
        absolute;
    top:
        50%;
    z-index:
        6;
    width:
        40px;
    height:
        40px;
    margin:
        0;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        rgba(38,52,61,.76);

    color:
        #FFFFFF;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    font-family:
        inherit;

    font-size:
        21px;

    line-height:
        1;

    cursor:
        pointer;

    transform:
        translateY(-50%);

    transition:
        background .2s ease;
}

.portfolio-modal-slider-prev {
    left:
        16px;
}

.portfolio-modal-slider-next {
    right:
        16px;
}

.portfolio-modal-slider-arrow:hover {
    background:
        #FF7A18;
}

.portfolio-modal-slider-arrow:focus-visible {
    outline:
        2px solid #FF7A18;

    outline-offset:
        2px;
}

.portfolio-modal-project-image.is-dragging {
    cursor:
        grabbing;
}

/* .portfolio-modal-visual:hover
.portfolio-modal-project-image {
    transform:
        scale(1.03);
} */

.portfolio-modal-image-placeholder {
    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(
            135deg,
            #071027,
            #36445F
        );

    color:
        #FFFFFF;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1px;
}

.portfolio-modal-project-image[src]:not([src=""])
~ .portfolio-modal-image-placeholder {
    display:
        none;
}

.portfolio-modal-badge {
    position:
        absolute;

    bottom:
        18px;

    left:
        18px;

    background:
        rgba(255,255,255,.94);

    padding:
        7px 10px;

    border-radius:
        9px;

    font-size:
        7px;

    font-weight:
        800;

    color:
        #17202D;
		
	line-height: 1;	
}

.portfolio-modal-left-caption {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        16px;

    margin-top:
        16px;

    font-size:
        11px;

    color:
        #77736D;
}

.portfolio-modal-left-caption strong {
    color:
        #37332F;

    font-size:
        12px;
}

.portfolio-modal-project-count {
    padding:
        6px 9px;

    border:
        1px solid #DCD6CE;

    border-radius:
        99px;

    background:
        rgba(255,255,255,.5);

    white-space:
        nowrap;
}


/* =========================================================
   RIGHT
   ========================================================= */

.portfolio-modal-right {
    min-width:
        0;

    min-height:
        0;

    height:
        100%;

    display:
        flex;

    flex-direction:
        column;

    background:
        #FFFFFF;

    overflow:
        hidden;
}

.portfolio-modal-content {
    flex:
        1 1 auto;

    min-height:
        0;

    min-width:
        0;

    overflow:
        hidden;
}

.portfolio-modal-scroll {
    height:
        100%;

    overflow-y:
        auto;

    overflow-x:
        hidden;

    padding:
        54px 38px 105px;

    -webkit-overflow-scrolling:
        touch;

    scrollbar-width:
        thin;
}

.portfolio-modal-scroll::-webkit-scrollbar {
    width:
        6px !important;
}

.portfolio-modal-scroll::-webkit-scrollbar-thumb {
    background:
        #D9D9D9 !important;

    border-radius:
        20px !important;
}

.portfolio-modal-scroll::-webkit-scrollbar-track {
    background: transparent !important;
}

.portfolio-modal-eyebrow {
    font-size:
        10px;

    letter-spacing:
        2px;

    font-weight:
        800;

    color:
        #FF7A18;

    margin-bottom:
        14px;
}

.portfolio-modal-scroll h1 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        46px;

    line-height:
        .96;

    letter-spacing:
        -2px;

    margin:
        0 0 15px;

    color:
        #202832;

    font-weight:
        bold;
}

.portfolio-modal-subtitle {
    font-size:
        13px;

    font-weight:
        700;

    color:
        #68727D;

    margin-bottom:
        22px;
}

.portfolio-modal-lead {
    font-size:
        15px;

    line-height:
        1.65;

    color:
        #697481;

    margin:
        0;
}

.portfolio-modal-divider {
    height:
        1px;

    background:
        #E9E5DF;

    margin:
        28px 0;
}

.portfolio-modal-section {
    margin-bottom:
        27px;
}

.portfolio-modal-section-title {
    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        1.25px;

    font-weight:
        800;

    margin-bottom:
        12px;

    color:
        #303944;
		
	line-height: 1;	
}

.portfolio-modal-section > p {
    font-size:
        13px;

    line-height:
        1.65;

    color:
        #6D7782;

    margin:
        0;
}

.portfolio-modal-meta-grid {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        14px;
}

.portfolio-modal-meta {
    background:
        #F8F6F2;

    border-radius:
        13px;

    padding:
        14px;
		
	line-height: 1;	
}

.portfolio-modal-meta small {
    display:
        block;

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

    font-weight:
        800;

    color:
        #969087;

    margin-bottom:
        6px;
		
	line-height: 1;	
}

.portfolio-modal-meta strong {
    font-size:
        12px;

    color:
        #303842;
}

.portfolio-modal-feature-grid {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        9px;
}

.portfolio-modal-feature {
    border:
        1px solid #E9E5DF;

    border-radius:
        12px;

    padding:
        11px 12px;

    font-size:
        11px;

    font-weight:
        650;

    color:
        #46515D;
		
	line-height: 1;	
}

.portfolio-modal-feature::before {
    content:
        "✓";

    color:
        #FF7A18;

    font-weight:
        900;

    margin-right:
        7px;
}

.portfolio-modal-role,
.portfolio-modal-stack {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;
}

.portfolio-modal-pill {
    font-size:
        10px;

    font-weight:
        700;

    padding:
        7px 10px;

    border-radius:
        99px;

    background:
        #FFF2E7;

    color:
        #E9680C;
		
	line-height: 1;	
}

.portfolio-modal-stack-pill {
    background:
        #F1F3F5;

    color:
        #47525D;
}




/* =========================================================
   FOOTER
   ========================================================= */

.portfolio-modal-footer {
    position:
        absolute;

    left:
        57%;

    right:
        0;

    bottom:
        0;

    height:
        88px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;

    padding:
        18px 38px;

    background:
        rgba(255,255,255,.96);

    border-top:
        1px solid #E9E5DF;

    backdrop-filter:
        blur(10px);

    z-index:
        4;
}

.portfolio-modal-button,
.portfolio-modal-back {
    height:
        48px;

    padding:
        0 19px;

    border:
        0;

    border-radius:
        11px;

    font-size:
        11px;

    font-weight:
        800;

    cursor:
        pointer;

    font-family:
        inherit;

    text-decoration:
        none;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    white-space:
        nowrap;
}

.portfolio-modal-button {
    background:
        #FF7A18;

    color:
        #FFFFFF;

    box-shadow:
        0 8px 18px
        rgba(255,122,24,.2);
}

.portfolio-modal-button:hover {
    background:
        #E86608;

    color:
        #FFFFFF;
}

.portfolio-modal-back {
    background:
        #FFF0E5;

    color:
        #303943;
}

.portfolio-modal-back:hover {
    background:
        #F1E8DE;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .portfolio-card {
        grid-column:
            span 4;
    }

    .portfolio-card.portfolio-wide {
        grid-column:
            span 8;
    }

    .portfolio-card.portfolio-normal,
    .portfolio-card.portfolio-tall {
        grid-column:
            span 4;
    }

}


/* =========================================================
   MODAL RESPONSIVE
   ========================================================= */

@media (max-width: 850px) {

    .portfolio-modal {
        padding: 8px;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .portfolio-modal-box {
        width: 100%;
        height: calc(100dvh - 16px);
        max-height: calc(100dvh - 16px);
        max-width: 1180px;

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

        overflow-y: auto;
        overflow-x: hidden;

        border-radius: 20px;
        margin: 0 auto;

        overscroll-behavior: contain;
    }

    .portfolio-modal-left {
        display: flex;
        width: 100%;
        padding: 42px 18px 22px;
        flex: none;
    }

    .portfolio-modal-right {
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        overflow: visible;
        flex: none;
    }

    .portfolio-modal-content {
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        overflow: visible;
        flex: none;
    }

    .portfolio-modal-scroll {
        width: 100%;
        height: auto;
        overflow: visible;
        padding: 30px 22px 30px;
    }

    .portfolio-modal-footer {
        position: static;
        width: 100%;
        height: auto;
        padding: 12px 20px;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        flex: none;
        box-sizing: border-box;
    }

    .portfolio-modal-close {
        top: 16px;
        right: 16px;
    }

    .portfolio-modal-scroll h1 {
        font-size: 40px;
    }
}


@media (max-width: 480px) {

    .portfolio-modal-meta-grid,
    .portfolio-modal-feature-grid {
        grid-template-columns:
            1fr;
    }

    .portfolio-modal-scroll {
        padding:
            38px 25px 120px;
    }

    .portfolio-modal-scroll h1 {
        font-size:
            36px;
    }

    .portfolio-modal-footer {
		height: auto;
		padding: 12px 16px;
	} 

    .portfolio-modal-footer
    .portfolio-modal-button,
    .portfolio-modal-footer
    .portfolio-modal-back {
        flex:
            1;

        min-width:
            0;

        padding:
            0 10px;
    }

}


/* =========================================================
   PORTFOLIO MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .portfolio-container {
        width:
            calc(100vw - 28px);
    }

    .portfolio-filter-wrap {
        position:
            static;
    }

    .portfolio-filters {
        align-items:
            stretch;
    }

    .portfolio-search {
        width:
            100%;

        margin-left:
            0;
    }

    .portfolio-search input {
        width:
            100%;
    }

    .portfolio-heading {
        display:
            block;
    }

    .portfolio-heading h2 {
        font-size:
            33px;

        margin-bottom:
            10px;
    }

    .portfolio-heading p {
        max-width:
            none;
    }

    .portfolio-grid {
        grid-template-columns:
            1fr;
    }

    .portfolio-card,
    .portfolio-card.portfolio-wide,
    .portfolio-card.portfolio-normal,
    .portfolio-card.portfolio-tall {
        grid-column:
            span 1;
    }

    .portfolio-shot {
        height:
            245px;

        min-height:
            245px;

        flex-basis:
            245px;
    }

}