.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.featured:after
{    
    content: 'Featured';
    position: absolute;
    display: grid;    
    width: auto;
    height: 30px;
    border-radius: 50px;
    background: #FFF;
    top: 14px;
    left: 14px;
    align-content: center;
    border: 0px;
    padding: 0px 13px 0px 31px;
    font-size: 13px;
    font-weight: 700;    
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23278536'%3E%3Cpath d='M10 1.7 12.4 7l5.8.5-4.4 3.9 1.3 5.7L10 14.1 4.9 17.1l1.3-5.7L1.8 7.5 7.6 7 10 1.7Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 13px center;
	background-size: 14px 14px;	
}

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

.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: var(--colour-main-text);
}
.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: var(--colour-main-text);
}

.blog-list > .box > span
{
	grid-area: date;
	font-size: 14px;
	font-weight: 400;
	color: var(--colour-main-text);
}

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