Fix CSS for Italian "The secret is to begin"

[veganstraightedge]

In English, the design looks like this:
https://crimethinc.com/2016/09/28/feature-the-secret-is-to-begin-getting-started-further-resources-frequently-asked-questions

---

In the Italian translation, it looks like this:
https://crimethinc.com/2016/09/28/il-segreto-sta-nelliniziare-iniziare-altre-risorse-faq

---

TODO

• Reposition the links to not overlap with header text, on big screen
• Resize header text to fit, on mobile

---

Since this is an article specific CSS change, it'll get added to this article's css field in the database. So, the deliverable for this issue is a block of CSS as a comment that can be copied / pasted into the database.

Feel free to save a copy of the HTML page and experiment in a <style> tag.

[cilgintokatli]

this issue is not specific for this page rather it is a common problem. if a word in the title is too long then this problem might reoccur. for example in german texts lengthy words are pretty common. consider this as a general fix.

	.header {
		display: grid;
		grid-gap: 10px;
		grid-template-columns: repeat(2,1fr);
	}
	.h1 {
	        overflow-wrap: break-word;
	        word-break: break-word;
	        hyphens: auto;
	        justify-self: end;
	        width: 50%;
	        margin: 0px;
	        font-size: 7vw;
	}
	h4{
	        margin: 0px;
	        align-self: end;
	}

@media (min-device-width:200px) and (max-width:599px) {
	.header {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 10px;
	}
	h1 {
	    order: 2;
	    margin: 0;
	    word-wrap: break-word;
	    overflow-wrap: break-word;
	    hyphens: auto;
	    padding-left: 10%;
	    padding-right: 10%;
	    overflow: hidden;
	    width: auto;
	}
	h4{
	    order: 1;
	    margin: 0;
	    padding-left: 10%;
	}
}