.hero {

  & .bgimg {
    position:absolute;
    inset:0;
    z-index:0;
    width:100%;
    height:100%;
    overflow:hidden;
    border-radius:var(--border_radius);
  }

  & .text {
    align-self:end;
  }

  & h2.large {
    margin:0;
  }
}

h3,h4 {
    font-size:1.3rem;
}

article {
    display:grid;
    grid-template-columns: 1fr 1.5fr;
    gap:var(--global_inline_padding);

    & .image {
        & img {
            width:100%;
            border-radius:var(--border_radius);
        }
    }
    & .date {
        color:var(--accent);
        font-weight:600;
    }

    & h1{
        font-size:2.5rem;
        margin-top:0;
    }
}

.all-related {
    padding-top:0;
}

.related .rel {
    &::after {
        --height:150px;
        content:'';
        position:absolute;
        background-color:var(--accent);
        height:var(--height);
        width:0.75rem;
        border-radius:0 1rem 1rem 0;
        left:0;
        top:50%;
        transform:translateY(-50%);
    }

    & .text {
        display:Grid;
        grid-template-columns: 1fr 3rem;
        padding-left:2rem;
        gap:1rem;

        & h3 {
            grid-column:1/-1;
            margin:0;
        }

        & .btn-outer {
            display:grid;
        }

        & .orange-btn {
            width:100%;
            padding:0.5rem;
            text-align: center;
            align-self:end;

            & img {
                display:inline-block;
                width:1rem;
                margin-inline:auto;
            }
        }
    }
}

.all-related {
    position:relative;
    
    & .rel:first-child {
        grid-column:1/-1;
        display:Grid;
        grid-template-columns: 1fr 1fr;
        margin-bottom:3rem;

        & .text {
            align-content: center;

            & h3 {
                font-size:2.5rem;
            }
        }
    }
}

.share {
    & p {
        font-size:2.5rem;
        color:var(--colour1);
        font-weight:600;
        letter-spacing: -0.05em;
        margin-top:3rem;
        
    }
    & a {
        float:left;
        margin-right:.5rem;
        height:4rem;

        & img {
            display:block;
            height:100%;
        }
    }
}

.pager-nav,
.pager-nav ul{
	float:left;
	Clear:left;
	width:100%;
	text-align: center;
	padding:0;
	margin:0;
}

.pager-nav {
	margin-bottom:5%;
}

	main .pager-nav ul li {
		display:inline-block;
		color:#333;
		padding:0;
		margin:0;
	}
	
		main .pager-nav ul li a {
			float:left;
			background-color:var(--colour2);
			padding:0.5em 1em;
			text-decoration: none;
			margin:0.25em;
            color:var(--body_text);
            border-radius:100rem;
		}
		
			main .pager-nav ul li a:hover,
			main .pager-nav ul li.active a{
				background-color:var(--accent);
                color:var(--body_text);
			}

@media screen and (min-width:2000px){

	h1,
    .hero h1,
    .hero h2 {
		font-size:4.5vw;
	}

	h2,
	h3,
    h4,h5,h6 {
		font-size:2.5vw;
	}
}

@media screen and (max-width:800px) {
    article {
        grid-template-columns: 1fr;

        & .text {
            padding-inline: var(--global_padding_inner);
        }
    }
}

@media screen and (max-width:700px) {
    .all-related {
        & .rel:first-child {
            grid-template-columns: 1fr;
        }
    }
}