* {
	border-color: var(--accent-color) !important;
}

body.single, body.page {
    overflow-y: auto;
}

#mire-header-nav {
	height: 100%;
	width: 100%;

	& ul {
		list-style-type: none;
		display: flex;
		justify-content: space-evenly;
	}
	
	& h4 {
		margin: 0;
	}
	
	& a {
				transition: var(--transition-slow);
	}
}
	
.mire-firstLetter {
	color: var(--accent-color);
	font-size: var(--step-5);
    font-family: "Playfair Display", serif;
    float: left;
    line-height: 1.5em;
    margin-right: var(--space-xs);
	width: 1.5em;
	text-align: center;
	
	&:before {
		content: "";
		width: 1.5em;
		height: 1.5em;
		display: block;
		position: absolute;
		border: var(--accent-border);
		border-radius: var(--accent-border-radius);

	}
}

.mire-post-header {
    /*position: relative;*/
	position: fixed;
	
	& + * {
		padding-top: var(--header-size);
	}
}

.portfolio, .post, div.page {
    padding-inline: var(--footer-size);

    & article {
        width: 100%;
        min-height: 100dvh;
        border-inline: var(--border);
        container-name: portfolio-content;

        & section {
            width: 100%;
            flex-grow: 1;
            box-sizing: border-box;
			
			& hr {
				box-sizing: border-box;
				min-height: initial;
				padding: initial;
			}
        }

        & figure {
            width: 100%;
        }

        & img {
            /*max-height: 50dvh;*/
            width: 100%;
        }

		& .mire-title-block{
			display: flex;
  			flex-direction: column;
  			height: 100vh;
			
			position: sticky;
			top: 0;
		}
		
        & .mire-portfolio-title {
            justify-self: end;
			/*letter-spacing: var(--space-m);*/
      		line-height: var(--space-2xl) !important;
      		overflow-wrap: anywhere;
			
			& + img {
				flex-grow: 1;
  				object-fit: cover;
				max-height: initial;
			}
        }
		
        & p, li, .mire-portfolio-title {
            height: fit-content;
            line-height: 1em;
            margin-block: 0;
            padding-block: var(--space-l);
            padding-inline: var(--space-l);
			color: var(--color-dark);
        }
    }
}

.post {
    & article {
        display: grid;
        grid-template-columns: 2fr 0 3fr;
		

        & section > *{
            columns: 45ch;
			margin-inline: 0;
			padding-inline: var(--space-l);
			margin-block: 0;
			padding-block: var(--space-l);
			min-height: 50dvh;
			align-content: center;
			
			&:has( figure)
			{
				padding: 0;
				min-height: initial;
			}
			
			& p:first-line {
				font-weight: bold;
			}
        }
    }
}

div.page {
    & article {
        display: flex;
        flex-direction: column;
        align-items: center;

        & section {
            display: flex;
            flex-direction: column;

            & p {
                max-width: 100%;
                columns: 45ch;
            }
        }
    }
}

.portfolio {
    & article {
        display: flex;
        flex-direction: column;
        align-items: center;

        & section {
            display: grid;
            grid-template-columns: 1fr 0 2fr;
        }
    }
}

@media screen and (width < 840px) {
    .portfolio, .post, div.page {
        padding-inline: 0;

        & article {
            border: none;

            & * {
                padding-inline: 0;
            }

            & p, .mire-portfolio-title {
                padding-inline: var(--space-l);
            }

            & section {
                padding-inline: 0;
            }
        }
    }

    .post {
        & article {
            grid-template-columns: 1fr !important;
        }
    }

    .portfolio {
        & section {
            grid-template-columns: 1fr !important;
            box-sizing: border-box;
        }
    }

    hr.vertical-ruler {
        height: 0;
        width: calc(100% + 2 * var(--space-m));
        border: none;
        border-top: var(--border);
        margin: 0;
    }
	
	.mire-title-block{
		position: initial !important;
	}
}

@media screen and (width > 2000px) {
    .portfolio, .post, div.page {
        padding-inline: calc(3 * var(--space-3xl));
}