.blog
{
	margin: var(--padding-main);
    padding: 0px 0.5rem;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: min-content 1fr;
    gap: 0px 0px;    
    align-items: center;    	
	grid-template-areas:
		"title"
        "boxes"
		"pagination";		
}

.blog > .pagination
{	
	justify-self: center;
    display: flex;
    margin-top: 16px;
    grid-area: pagination;
    gap: 8px;
}
.blog > .pagination > button[type="submit"] 
{
    display: block;
    min-width: 32px;
    width: 32px;
    height: 32px;
    color: var(--colour-secondary-text);
    line-height: normal;
    background: var(--colour-base);
    border-radius: var(--radius-tiny);
    border: 1px solid var(--colour-stroke);
    padding: 4px;
}
.blog > .pagination > button[type="submit"]:hover, 
.blog > .pagination > button[type="submit"].current 
{
    background: var(--colour-main);
    color: var(--colour-text-over-main);
}

.blog > .pagination > button[type="submit"].next span, 
.blog > .pagination > button[type="submit"].previous span 
{
    background: var(--colour-main-text);
    mask-image: url(/index/up.svg);
    mask-size: 12px 12px;
    mask-position: center;
    mask-repeat: no-repeat;
    display: block;
    width: 24px;
    height: 24px;
}
.blog > .pagination > button[type="submit"].previous span 
{
    transform: rotate(-90deg);
}
.blog > .pagination > button[type="submit"].next span, 
.blog > .pagination > button[type="submit"].previous span 
{
    mask-image: url(/index/up.svg);
    mask-size: 12px 12px;
    mask-repeat: no-repeat;
    display: block;
    width: 24px;
    height: 24px;
    background: var(--colour-main-text);
    mask-position: center center;
}
.blog > .pagination > button[type="submit"].previous span 
{
    transform: rotate(-90deg);
}

.blog-list
{
	grid-area: boxes;
	display: grid;
    grid-auto-flow: row;
    align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 416px), 416px));
    grid-gap: var(--grid-gap-standard);
    padding: 0px;
    width: 100%;
	margin: 16px 0px;
	justify-content: center;
}

.blog-list > .box
{
	display: grid;
	grid-template-areas: 
		"image"
		"date"
		"title"
		"description"
		"button";
	grid-gap: 16px;	
	max-width: 408px;
}

.blog-list > .box > h1
{
	grid-area: title;		
	font-size: 24px;
	font-weight: 600;	
	color: #111;
}
.blog-list > .box > img
{
grid-area: image;
    width: 100%;
    height: 215px;
    text-wrap-style: balance;
    border-radius: 4px;
    margin: auto;
    object-fit: cover;
	object-position: top;
}
.blog-list > .box > p
{
	grid-area: description;
	font-size: 16px;
	font-weight: 400;	
	color: #111111BF;
}

.blog-list > .box > span
{
	grid-area: date;
	font-size: 14px;
	font-weight: 400;
	color: #111111BF;
}

.blog-list > .box > .button
{
	grid-area: button;
}