body {
    background-attachment: fixed;
}

h1,h2 {
    text-transform: uppercase
}

h1:before {
    content: "/";
    margin-inline: -.125em .075em;
    font-weight: 700;
    color: var(--col-highlight)
}

.wrap-banner--pfd {
    display: block
}

@supports (display:grid) {	
    .wrap-all {
        max-width: 1000px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 2.5fr 7.5fr;
        grid-template-columns: 25% minmax(70%, 700px);
        grid-gap: 2rem;
        gap: 2rem;
        row-gap: clamp(2rem, 3.5vw, 5rem);
    }

    .wrap-content {
        grid-column-start: 2;
        grid-row-start: 2;
	@media (width >= 1024px) {
	    margin-top: -1.5rem
	}
    }

    @media (min-height: 45rem) {
        .wrap-sidebar {
            position: sticky;
            top: 3rem;
            align-self: start;
        }
    }
	
	.wrap-logo--link {
	    margin: 0;
	    transform: translate(1rem, 3.5rem) rotate(-18deg) scale(1.3)
	}
}

.link__nav--home {
    color: var(--col-body)!important;
    font-weight: bolder
}

@media (min-width: 1200px) {
	.link__nav--home {
		font-size: 2.25rem;
	}
	
	@supports (scale: 1.1) {
	    .wrap-logo--link {
	        scale: 1.1;
	    }
		
	    .figure__featimg {
	        position: relative;
	        box-shadow: none
	    }
	
	    .figure__featimg:after {
	        content: "";
	        position: absolute;
	        display: block;
	        inset: 0;
	        z-index: -1;
	        translate: 12% 30%;
		transform: skew(-15deg);
		scale: 1 0.5;
	        background-color: var(--col-secondary)
	    }
	
	    .figure__featimg--portrait:after {
	        translate: 24% 30%;
	    }
	}
}

.wrap-preview {
    all: revert;
    overflow: auto;
}

@supports (display:flow-root) {
    .wrap-preview {
        display: flow-root;
        overflow: visible;
    }
}

.wrap-preview--title:before {
    color: currentColor
}

.wrap-preview--image {
    float: right;
    float: inline-end;
    margin-inline-start: .5rem;
    max-width: 20rem;
}

.wrap-preview p {
    margin: .75rem 0 1.5rem;
    text-wrap: pretty
}

@supports (selector(&)) {
    .wrap-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 1.5rem;
        column-gap: 1.5rem;

        & .wrap-preview--image {
            float: none;
            margin-inline-start: 0;	
            max-width: none;
        }
	    
        & .wrap-preview {       
            display: inline-grid;
            grid-template-rows: subgrid;
            grid-row: auto / span 3;
        }
    }
}