.blog
{
    display: contents;		
}

.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%, 288px), 1fr));
    grid-gap: 16px;
    padding: 0px;
    width: 100%;
	justify-content: stretch;	
}
@media (min-width: 577px)
{
	.blog-list
	{		
		justify-content: center;
	}
	@container (min-width: calc((279px * 2) + 16px)) 
	{
		.blog-list
		{
			grid-template-columns: repeat(2, minmax(279px, 348px));
		}		
	}
}
@media (min-width: 769px)
{
	.blog-list
	{		
		grid-gap: 24px;
	}
	
	@container (min-width: calc((348px * 2) + 24px)) 
	{
		.blog-list
		{
			grid-template-columns: repeat(2, minmax(348px, 410px));
		}
	}
	@container (min-width: calc((348px * 3) + (24px * 2))) 
	{
		.blog-list
		{
			grid-template-columns: repeat(3, minmax(348px, 410px));
		}
	}
}

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

.blog-list > .box > *
{
	margin: 0px 4px;
}

.blog-list > .box > h1,
.blog-list > .box > h2,
.blog-list > .box > h3
{
	grid-area: title;		
	font-size: 24px;
	font-weight: 600;	
	color: #111;
}
.blog-list > .box > img
{
	grid-area: image;
    width: 100%;
    aspect-ratio: 16 / 10;
    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;
}