Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <link href="https://fonts.googleapis.com/css2?family=GFS+Neohellenic:[email protected]&display=swap" rel="stylesheet">
<div class="grid-container">
  <div class="half">
    <svg id="header"  width="280.7" height="350" viewBox="0 0 593.7 71.605" xmlns="http://www.w3.org/2000/svg"><g stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="none" style="stroke:#000;stroke-width:0.25mm;fill:none"><path id="word" d="M 262.3 62.701 L 256.4 62.601 L 250.3 62.701 A 33.349 33.349 0 0 1 249.475 62.744 Q 248.547 62.783 247.3 62.795 A 124.095 124.095 0 0 1 246.1 62.801 Q 245.834 62.801 245.804 62.328 A 2.02 2.02 0 0 1 245.8 62.201 Q 245.8 61.601 246.1 61.601 A 37.634 37.634 0 0 0 247.688 61.569 Q 249.287 61.502 250.358 61.287 A 7.345 7.345 0 0 0 251.1 61.101 A 3.693 3.693 0 0 0 252.19 60.565 A 3.049 3.049 0 0 0 253.25 59.151 Q 253.8 57.701 253.8 54.701 L 253.8 40.001 L 224.8 40.001 L 224.8 54.701 Q 224.8 57.149 225.143 58.537 A 5.298 5.298 0 0 0 225.35 59.201 A 3.101 3.101 0 0 0 227.162 60.997 A 4.302 4.302 0 0 0 227.45 61.101 A 7.417 7.417 0 0 0 228.443 61.337 Q 229.957 61.601 232.5 61.601 Q 232.766 61.601 232.796 62.074 A 2.02 2.02 0 0 1 232.8 62.201 Q 232.8 62.801 232.5 62.801 Q 230.275 62.801 228.864 62.733 A 30.769 30.769 0 0 1 228.3 62.701 L 222.2 62.601 L 216.3 62.701 Q 214.855 62.791 212.43 62.8 A 147.224 147.224 0 0 1 211.9 62.801 A 0.133 0.133 0 0 1 211.785 62.728 Q 211.715 62.616 211.703 62.328 A 3.028 3.028 0 0 1 211.7 62.201 Q 211.7 61.756 211.81 61.641 A 0.121 0.121 0 0 1 211.9 61.601 A 39.661 39.661 0 0 0 213.531 61.569 Q 215.8 61.476 217 61.101 A 3.765 3.765 0 0 0 218.154 60.524 A 3.224 3.224 0 0 0 219.2 59.151 A 6.01 6.01 0 0 0 219.503 58.153 Q 219.734 57.109 219.785 55.602 A 26.506 26.506 0 0 0 219.8 54.701 L 219.8 24.101 Q 219.8 21.675 219.408 20.296 A 4.947 4.947 0 0 0 219.2 19.701 A 3.377 3.377 0 0 0 217.43 17.922 A 4.678 4.678 0 0 0 217 17.751 Q 215.681 17.297 213.138 17.218 A 36.439 36.439 0 0 0 212 17.201 A 0.133 0.133 0 0 1 211.885 17.128 Q 211.815 17.016 211.803 16.728 A 3.028 3.028 0 0 1 211.8 16.601 Q 211.8 16.156 211.91 16.041 A 0.121 0.121 0 0 1 212 16.001 L 216.4 16.101 Q 220 16.301 222.2 16.301 Q 224.7 16.301 228.3 16.101 L 232.5 16.001 Q 232.766 16.001 232.796 16.474 A 2.02 2.02 0 0 1 232.8 16.601 Q 232.8 17.201 232.5 17.201 Q 229.786 17.201 228.222 17.606 A 6.231 6.231 0 0 0 227.6 17.801 A 4.147 4.147 0 0 0 226.428 18.458 A 3.477 3.477 0 0 0 225.4 19.851 A 6.01 6.01 0 0 0 225.097 20.848 Q 224.866 21.892 224.815 23.399 A 26.506 26.506 0 0 0 224.8 24.301 L 224.8 38.401 L 253.8 38.401 L 253.8 24.301 Q 253.8 21.839 253.43 20.421 A 5.603 5.603 0 0 0 253.25 19.851 A 3.371 3.371 0 0 0 251.461 17.953 A 4.683 4.683 0 0 0 251.1 17.801 A 6.965 6.965 0 0 0 250.058 17.511 Q 248.913 17.276 247.238 17.219 A 33.405 33.405 0 0 0 246.1 17.201 Q 245.834 17.201 245.804 16.728 A 2.02 2.02 0 0 1 245.8 16.601 Q 245.8 16.001 246.1 16.001 L 250.3 16.101 Q 253.699 16.28 255.898 16.298 A 58.532 58.532 0 0 0 256.4 16.301 Q 258.008 16.301 260.612 16.183 A 222.944 222.944 0 0 0 262.3 16.101 L 266.7 16.001 A 0.133 0.133 0 0 1 266.815 16.073 Q 266.885 16.186 266.898 16.474 A 3.028 3.028 0 0 1 266.9 16.601 Q 266.9 17.045 266.79 17.16 A 0.121 0.121 0 0 1 266.7 17.201 Q 263.2 17.201 261.6 17.751 A 4.101 4.101 0 0 0 260.474 18.331 A 3.293 3.293 0 0 0 259.4 19.701 Q 258.8 21.101 258.8 24.101 L 258.8 54.701 Q 258.8 57.173 259.208 58.593 A 5.248 5.248 0 0 0 259.4 59.151 A 3.259 3.259 0 0 0 261.309 60.999 A 4.415 4.415 0 0 0 261.6 61.101 Q 262.908 61.509 265.484 61.584 A 42.05 42.05 0 0 0 266.7 61.601 A 0.133 0.133 0 0 1 266.815 61.673 Q 266.885 61.786 266.898 62.074 A 3.028 3.028 0 0 1 266.9 62.201 Q 266.9 62.645 266.79 62.76 A 0.121 0.121 0 0 1 266.7 62.801 A 132.825 132.825 0 0 1 265.375 62.794 Q 263.939 62.78 262.9 62.733 A 35.551 35.551 0 0 1 262.3 62.701 Z M 363.7 26.401 L 363.7 63.901 Q 363.7 64.101 363.2 64.201 Q 362.7 64.301 362.5 64.101 L 330.3 24.201 L 328.6 22.201 L 328.6 52.401 Q 328.6 57.501 330.05 59.551 Q 331.268 61.272 334.001 61.548 A 10.953 10.953 0 0 0 335.1 61.601 A 0.133 0.133 0 0 1 335.215 61.673 Q 335.285 61.786 335.298 62.074 A 3.028 3.028 0 0 1 335.3 62.201 Q 335.3 62.645 335.19 62.76 A 0.121 0.121 0 0 1 335.1 62.801 A 79.677 79.677 0 0 1 334.069 62.794 Q 333.076 62.781 332.376 62.742 A 16.958 16.958 0 0 1 331.8 62.701 L 327.7 62.601 L 323.5 62.701 A 21.241 21.241 0 0 1 322.838 62.744 Q 322.09 62.783 321.076 62.795 A 82.08 82.08 0 0 1 320.1 62.801 Q 319.834 62.801 319.804 62.328 A 2.02 2.02 0 0 1 319.8 62.201 Q 319.8 61.601 320.1 61.601 A 10.415 10.415 0 0 0 321.903 61.456 Q 322.86 61.287 323.597 60.922 A 4.112 4.112 0 0 0 325.2 59.551 A 5.976 5.976 0 0 0 325.908 58.065 Q 326.6 55.987 326.6 52.401 L 326.6 20.201 A 15.75 15.75 0 0 0 324.667 18.684 Q 322.409 17.201 320.3 17.201 A 0.133 0.133 0 0 1 320.185 17.128 Q 320.115 17.016 320.103 16.728 A 3.028 3.028 0 0 1 320.1 16.601 Q 320.1 16.156 320.21 16.041 A 0.121 0.121 0 0 1 320.3 16.001 L 325.9 16.101 L 330.2 16.001 A 2.884 2.884 0 0 1 330.609 16.028 Q 331.088 16.096 331.341 16.342 A 0.871 0.871 0 0 1 331.35 16.351 Q 331.7 16.701 332.4 17.901 A 33.096 33.096 0 0 0 334.088 20.407 A 28.784 28.784 0 0 0 334.7 21.201 L 361.7 55.101 L 361.7 26.401 Q 361.7 21.301 360.3 19.251 A 4.289 4.289 0 0 0 358.192 17.651 Q 357.439 17.37 356.498 17.264 A 10.76 10.76 0 0 0 355.3 17.201 Q 355.034 17.201 355.004 16.728 A 2.02 2.02 0 0 1 355 16.601 Q 355 16.001 355.3 16.001 L 358.6 16.101 Q 361 16.301 362.7 16.301 A 33.807 33.807 0 0 0 363.798 16.281 Q 365.07 16.24 366.785 16.109 A 109.709 109.709 0 0 0 366.9 16.101 L 370.4 16.001 A 0.133 0.133 0 0 1 370.515 16.073 Q 370.585 16.186 370.598 16.474 A 3.028 3.028 0 0 1 370.6 16.601 Q 370.6 17.045 370.49 17.16 A 0.121 0.121 0 0 1 370.4 17.201 A 10.466 10.466 0 0 0 368.541 17.354 Q 366.29 17.761 365.2 19.251 A 5.888 5.888 0 0 0 364.417 20.806 Q 363.7 22.874 363.7 26.401 Z M 478.7 26.401 L 478.7 63.901 Q 478.7 64.101 478.2 64.201 Q 477.7 64.301 477.5 64.101 L 445.3 24.201 L 443.6 22.201 L 443.6 52.401 Q 443.6 57.501 445.05 59.551 Q 446.268 61.272 449.001 61.548 A 10.953 10.953 0 0 0 450.1 61.601 A 0.133 0.133 0 0 1 450.215 61.673 Q 450.285 61.786 450.298 62.074 A 3.028 3.028 0 0 1 450.3 62.201 Q 450.3 62.645 450.19 62.76 A 0.121 0.121 0 0 1 450.1 62.801 A 79.677 79.677 0 0 1 449.069 62.794 Q 448.076 62.781 447.376 62.742 A 16.958 16.958 0 0 1 446.8 62.701 L 442.7 62.601 L 438.5 62.701 A 21.241 21.241 0 0 1 437.838 62.744 Q 437.09 62.783 436.076 62.795 A 82.08 82.08 0 0 1 435.1 62.801 Q 434.834 62.801 434.804 62.328 A 2.02 2.02 0 0 1 434.8 62.201 Q 434.8 61.601 435.1 61.601 A 10.415 10.415 0 0 0 436.903 61.456 Q 437.86 61.287 438.597 60.922 A 4.112 4.112 0 0 0 440.2 59.551 A 5.976 5.976 0 0 0 440.908 58.065 Q 441.6 55.987 441.6 52.401 L 441.6 20.201 A 15.75 15.75 0 0 0 439.667 18.684 Q 437.409 17.201 435.3 17.201 A 0.133 0.133 0 0 1 435.185 17.128 Q 435.115 17.016 435.103 16.728 A 3.028 3.028 0 0 1 435.1 16.601 Q 435.1 16.156 435.21 16.041 A 0.121 0.121 0 0 1 435.3 16.001 L 440.9 16.101 L 445.2 16.001 A 2.884 2.884 0 0 1 445.609 16.028 Q 446.088 16.096 446.341 16.342 A 0.871 0.871 0 0 1 446.35 16.351 Q 446.7 16.701 447.4 17.901 A 33.096 33.096 0 0 0 449.088 20.407 A 28.784 28.784 0 0 0 449.7 21.201 L 476.7 55.101 L 476.7 26.401 Q 476.7 21.301 475.3 19.251 A 4.289 4.289 0 0 0 473.192 17.651 Q 472.439 17.37 471.498 17.264 A 10.76 10.76 0 0 0 470.3 17.201 Q 470.034 17.201 470.004 16.728 A 2.02 2.02 0 0 1 470 16.601 Q 470 16.001 470.3 16.001 L 473.6 16.101 Q 476 16.301 477.7 16.301 A 33.807 33.807 0 0 0 478.798 16.281 Q 480.07 16.24 481.785 16.109 A 109.709 109.709 0 0 0 481.9 16.101 L 485.4 16.001 A 0.133 0.133 0 0 1 485.515 16.073 Q 485.585 16.186 485.598 16.474 A 3.028 3.028 0 0 1 485.6 16.601 Q 485.6 17.045 485.49 17.16 A 0.121 0.121 0 0 1 485.4 17.201 A 10.466 10.466 0 0 0 483.541 17.354 Q 481.29 17.761 480.2 19.251 A 5.888 5.888 0 0 0 479.417 20.806 Q 478.7 22.874 478.7 26.401 Z M 20.5 62.701 L 11.8 62.601 L 5.2 62.701 A 48.199 48.199 0 0 1 4.213 62.744 Q 3.104 62.783 1.623 62.795 A 174.764 174.764 0 0 1 0.2 62.801 A 0.133 0.133 0 0 1 0.085 62.728 Q 0.015 62.616 0.003 62.328 A 3.028 3.028 0 0 1 0 62.201 Q 0 61.756 0.11 61.641 A 0.121 0.121 0 0 1 0.2 61.601 Q 3.29 61.601 5.093 61.287 A 9.632 9.632 0 0 0 5.95 61.101 A 4.761 4.761 0 0 0 7.058 60.657 A 3.211 3.211 0 0 0 8.45 59.151 A 5.721 5.721 0 0 0 8.786 58.123 Q 9.1 56.787 9.1 54.701 L 9.1 8.401 Q 9.1 5.89 8.645 4.5 A 4.547 4.547 0 0 0 8.45 4.001 A 3.297 3.297 0 0 0 7.08 2.529 Q 6.601 2.249 5.99 2.063 A 6.397 6.397 0 0 0 5.95 2.051 A 9.766 9.766 0 0 0 4.747 1.785 Q 3.429 1.57 1.506 1.518 A 47.991 47.991 0 0 0 0.2 1.501 A 0.133 0.133 0 0 1 0.085 1.428 Q 0.015 1.316 0.003 1.028 A 3.028 3.028 0 0 1 0 0.901 Q 0 0.456 0.11 0.341 A 0.121 0.121 0 0 1 0.2 0.301 L 5.1 0.401 Q 8.316 0.554 10.476 0.59 A 74.05 74.05 0 0 0 11.7 0.601 A 46.239 46.239 0 0 0 13.934 0.543 Q 15.456 0.469 17.2 0.301 A 3795.323 3795.323 0 0 1 19.039 0.23 Q 24.699 0.015 25.599 0.002 A 6.85 6.85 0 0 1 25.7 0.001 Q 34.5 0.001 40 4.051 A 13.058 13.058 0 0 1 45.1 12.235 A 20.526 20.526 0 0 1 45.5 16.401 A 22.517 22.517 0 0 1 44.913 21.671 A 16.724 16.724 0 0 1 42.2 27.651 Q 38.9 32.201 33.85 34.401 Q 28.8 36.601 23.4 36.601 A 29.631 29.631 0 0 1 21.467 36.542 Q 19.747 36.429 18.5 36.101 A 0.249 0.249 0 0 1 18.262 35.952 Q 18.2 35.828 18.2 35.601 A 1.277 1.277 0 0 1 18.288 35.141 A 1.568 1.568 0 0 1 18.35 35.001 Q 18.5 34.701 18.7 34.801 Q 20.3 35.201 22.3 35.201 A 19.439 19.439 0 0 0 28.768 34.159 A 17.037 17.037 0 0 0 34.35 30.901 Q 39.287 26.612 39.3 18.444 A 27.193 27.193 0 0 0 39.3 18.401 A 22.551 22.551 0 0 0 38.898 14.041 A 16.656 16.656 0 0 0 37.2 9.251 Q 35.1 5.401 31.45 3.351 Q 27.8 1.301 23.4 1.301 Q 19.3 1.301 17.6 1.701 A 3.977 3.977 0 0 0 16.335 2.225 A 3.416 3.416 0 0 0 15.15 3.551 A 4.802 4.802 0 0 0 14.79 4.528 Q 14.4 6.006 14.4 8.601 L 14.4 54.301 Q 14.4 56.996 15.038 58.45 A 3.995 3.995 0 0 0 15.3 58.951 A 3.643 3.643 0 0 0 16.403 60.057 Q 16.917 60.398 17.595 60.654 A 9.32 9.32 0 0 0 18.75 61.001 A 16.203 16.203 0 0 0 20.373 61.284 Q 22.058 61.501 24.5 61.569 A 86.142 86.142 0 0 0 26.9 61.601 Q 27.166 61.601 27.196 62.074 A 2.02 2.02 0 0 1 27.2 62.201 Q 27.2 62.801 26.9 62.801 A 283.598 283.598 0 0 1 24.963 62.794 Q 22.225 62.776 20.5 62.701 Z M 310.3 62.801 L 273.9 62.801 A 0.133 0.133 0 0 1 273.785 62.728 Q 273.715 62.616 273.703 62.328 A 3.028 3.028 0 0 1 273.7 62.201 Q 273.7 61.756 273.81 61.641 A 0.121 0.121 0 0 1 273.9 61.601 A 37.634 37.634 0 0 0 275.488 61.569 Q 277.087 61.502 278.158 61.287 A 7.345 7.345 0 0 0 278.9 61.101 A 3.693 3.693 0 0 0 279.99 60.565 A 3.049 3.049 0 0 0 281.05 59.151 Q 281.6 57.701 281.6 54.701 L 281.6 24.101 Q 281.6 21.679 281.242 20.3 A 5.263 5.263 0 0 0 281.05 19.701 A 3.195 3.195 0 0 0 279.374 17.943 A 4.542 4.542 0 0 0 278.9 17.751 Q 277.581 17.297 275.038 17.218 A 36.439 36.439 0 0 0 273.9 17.201 A 0.133 0.133 0 0 1 273.785 17.128 Q 273.715 17.016 273.703 16.728 A 3.028 3.028 0 0 1 273.7 16.601 Q 273.7 16.156 273.81 16.041 A 0.121 0.121 0 0 1 273.9 16.001 L 308.5 16.001 Q 309.41 16.001 309.492 16.663 A 1.121 1.121 0 0 1 309.5 16.801 L 309.6 23.001 Q 309.695 24.806 309.7 27.514 A 163.935 163.935 0 0 1 309.7 27.801 Q 309.7 28.067 309.227 28.097 A 2.02 2.02 0 0 1 309.1 28.101 Q 308.5 28.101 308.5 27.801 A 13.312 13.312 0 0 0 308.096 24.435 A 9.695 9.695 0 0 0 305.8 20.201 A 8.965 8.965 0 0 0 299.904 17.358 A 12.34 12.34 0 0 0 298.7 17.301 L 295.3 17.301 Q 291.5 17.301 289.75 17.851 A 4.743 4.743 0 0 0 288.634 18.356 A 3.354 3.354 0 0 0 287.35 19.801 A 5.293 5.293 0 0 0 287.021 20.773 Q 286.775 21.782 286.718 23.255 A 24.202 24.202 0 0 0 286.7 24.201 L 286.7 37.901 A 449.729 449.729 0 0 0 291.119 37.837 Q 296.579 37.73 299.411 37.503 A 35.928 35.928 0 0 0 300.5 37.401 Q 304.1 37.001 304.5 37.001 Q 305 37.001 305 39.101 Q 305 41.301 304.5 41.301 A 2.613 2.613 0 0 1 304.253 41.281 Q 303.6 41.209 301.509 40.867 A 328.671 328.671 0 0 1 300.5 40.701 A 29.503 29.503 0 0 0 298.45 40.447 Q 295.433 40.164 290.148 40.053 A 307.768 307.768 0 0 0 286.7 40.001 L 286.7 54.301 Q 286.7 57.201 287.35 58.651 Q 288 60.101 289.8 60.651 Q 291.297 61.108 294.107 61.185 A 43.589 43.589 0 0 0 295.3 61.201 L 301.1 61.201 Q 305 61.201 307.8 57.951 A 14.542 14.542 0 0 0 310.42 53.404 A 20.353 20.353 0 0 0 311.4 49.501 A 0.246 0.246 0 0 1 311.558 49.265 Q 311.694 49.201 311.95 49.201 A 1.506 1.506 0 0 1 312.137 49.211 Q 312.33 49.235 312.42 49.316 A 0.236 0.236 0 0 1 312.5 49.501 A 193.195 193.195 0 0 0 312.101 54.143 Q 311.8 58.282 311.8 61.301 Q 311.8 62.101 311.5 62.451 Q 311.244 62.749 310.55 62.793 A 3.988 3.988 0 0 1 310.3 62.801 Z M 183.8 16.001 L 192.5 15.901 Q 194.11 15.811 196.601 15.802 A 158.287 158.287 0 0 1 197.2 15.801 Q 200.8 15.801 202.45 15.351 Q 204.1 14.901 204.6 13.401 Q 204.8 13.101 205.3 13.101 A 1.246 1.246 0 0 1 205.47 13.111 Q 205.659 13.137 205.74 13.228 A 0.25 0.25 0 0 1 205.8 13.401 Q 205.247 23.346 205.204 28.034 A 82.381 82.381 0 0 0 205.2 28.801 Q 205.2 28.985 204.733 28.999 A 2.684 2.684 0 0 1 204.65 29.001 Q 204.232 29.001 204.131 28.885 A 0.125 0.125 0 0 1 204.1 28.801 Q 204.1 24.756 203.609 22.412 A 10.885 10.885 0 0 0 203.35 21.401 A 6.119 6.119 0 0 0 202.546 19.718 A 4.891 4.891 0 0 0 200.55 18.051 Q 198.817 17.248 195.477 17.123 A 34.389 34.389 0 0 0 194.2 17.101 Q 191.34 17.101 189.682 17.551 A 6.834 6.834 0 0 0 189.2 17.701 A 4.587 4.587 0 0 0 188.032 18.299 A 3.556 3.556 0 0 0 186.85 19.751 A 5.821 5.821 0 0 0 186.507 20.798 Q 186.245 21.916 186.207 23.533 A 23.979 23.979 0 0 0 186.2 24.101 L 186.2 54.701 Q 186.2 57.801 186.8 59.201 Q 187.394 60.586 189.212 61.09 A 6.103 6.103 0 0 0 189.25 61.101 A 10.51 10.51 0 0 0 190.451 61.341 Q 191.665 61.519 193.407 61.575 A 53.034 53.034 0 0 0 195.1 61.601 A 0.133 0.133 0 0 1 195.215 61.673 Q 195.285 61.786 195.298 62.074 A 3.028 3.028 0 0 1 195.3 62.201 Q 195.3 62.645 195.19 62.76 A 0.121 0.121 0 0 1 195.1 62.801 A 161.309 161.309 0 0 1 193.638 62.794 Q 192.058 62.78 190.941 62.733 A 39.192 39.192 0 0 1 190.3 62.701 L 183.5 62.601 L 177 62.701 Q 175.622 62.777 173.423 62.795 A 174.764 174.764 0 0 1 172 62.801 A 0.133 0.133 0 0 1 171.885 62.728 Q 171.815 62.616 171.803 62.328 A 3.028 3.028 0 0 1 171.8 62.201 Q 171.8 61.756 171.91 61.641 A 0.121 0.121 0 0 1 172 61.601 Q 175.09 61.601 176.893 61.287 A 9.632 9.632 0 0 0 177.75 61.101 A 4.832 4.832 0 0 0 178.909 60.632 A 3.377 3.377 0 0 0 180.3 59.151 Q 180.913 57.881 180.989 55.422 A 23.32 23.32 0 0 0 181 54.701 L 181 23.901 A 29.258 29.258 0 0 0 180.969 22.501 Q 180.899 21.052 180.674 20.1 A 5.648 5.648 0 0 0 180.5 19.501 A 2.931 2.931 0 0 0 178.821 17.74 A 4.151 4.151 0 0 0 178.45 17.601 A 7.552 7.552 0 0 0 177.433 17.359 Q 176.322 17.166 174.68 17.117 A 39.674 39.674 0 0 0 173.5 17.101 A 30.026 30.026 0 0 0 171.3 17.176 Q 168.695 17.368 167.15 18.051 A 5.76 5.76 0 0 0 164.387 20.636 A 7.835 7.835 0 0 0 164 21.451 A 15.192 15.192 0 0 0 163.442 23.121 Q 162.822 25.355 162.4 28.801 Q 162.4 28.985 161.933 28.999 A 2.684 2.684 0 0 1 161.85 29.001 Q 161.432 29.001 161.331 28.885 A 0.125 0.125 0 0 1 161.3 28.801 Q 161.576 26.775 161.895 22.332 A 325.445 325.445 0 0 0 161.95 21.551 Q 162.3 16.501 162.3 13.801 A 0.589 0.589 0 0 1 162.336 13.585 Q 162.437 13.328 162.817 13.303 A 1.292 1.292 0 0 1 162.9 13.301 A 1.052 1.052 0 0 1 163.123 13.322 Q 163.444 13.392 163.492 13.69 A 0.702 0.702 0 0 1 163.5 13.801 A 1.668 1.668 0 0 0 163.658 14.544 Q 163.977 15.196 164.945 15.437 A 3.662 3.662 0 0 0 165 15.451 A 11.786 11.786 0 0 0 166.223 15.664 Q 167.325 15.801 168.7 15.801 Q 177.5 16.001 183.8 16.001 Z M 159.5 62.801 L 149 62.801 Q 147.2 62.801 142.4 56.801 A 112.109 112.109 0 0 1 139.214 52.601 Q 135.753 47.828 131.508 41.159 A 359.482 359.482 0 0 1 130.9 40.201 A 46.869 46.869 0 0 1 129.373 40.412 Q 127.904 40.588 126.848 40.6 A 13.358 13.358 0 0 1 126.7 40.601 Q 125.3 40.601 122.3 40.401 L 122.3 54.701 Q 122.3 57.149 122.643 58.537 A 5.298 5.298 0 0 0 122.85 59.201 A 3.101 3.101 0 0 0 124.662 60.997 A 4.302 4.302 0 0 0 124.95 61.101 A 7.417 7.417 0 0 0 125.943 61.337 Q 127.457 61.601 130 61.601 Q 130.266 61.601 130.296 62.074 A 2.02 2.02 0 0 1 130.3 62.201 Q 130.3 62.801 130 62.801 Q 127.775 62.801 126.364 62.733 A 30.769 30.769 0 0 1 125.8 62.701 L 119.7 62.601 L 113.9 62.701 A 37.82 37.82 0 0 1 113.019 62.744 Q 112.026 62.783 110.688 62.795 A 142.954 142.954 0 0 1 109.4 62.801 A 0.133 0.133 0 0 1 109.285 62.728 Q 109.215 62.616 109.203 62.328 A 3.028 3.028 0 0 1 109.2 62.201 Q 109.2 61.756 109.31 61.641 A 0.121 0.121 0 0 1 109.4 61.601 A 39.661 39.661 0 0 0 111.031 61.569 Q 113.3 61.476 114.5 61.101 A 3.765 3.765 0 0 0 115.654 60.524 A 3.224 3.224 0 0 0 116.7 59.151 A 6.01 6.01 0 0 0 117.003 58.153 Q 117.234 57.109 117.285 55.602 A 26.506 26.506 0 0 0 117.3 54.701 L 117.3 24.101 Q 117.3 21.675 116.908 20.296 A 4.947 4.947 0 0 0 116.7 19.701 A 3.377 3.377 0 0 0 114.93 17.922 A 4.678 4.678 0 0 0 114.5 17.751 Q 113.181 17.297 110.638 17.218 A 36.439 36.439 0 0 0 109.5 17.201 A 0.133 0.133 0 0 1 109.385 17.128 Q 109.315 17.016 109.303 16.728 A 3.028 3.028 0 0 1 109.3 16.601 Q 109.3 16.156 109.41 16.041 A 0.121 0.121 0 0 1 109.5 16.001 L 114 16.101 Q 116.756 16.254 118.633 16.29 A 56.053 56.053 0 0 0 119.7 16.301 A 62.009 62.009 0 0 0 121.393 16.279 Q 122.189 16.257 122.899 16.213 A 36.686 36.686 0 0 0 123.1 16.201 A 119.626 119.626 0 0 0 123.819 16.151 Q 124.85 16.076 125.6 16.001 A 65.9 65.9 0 0 1 129.14 15.75 A 53.154 53.154 0 0 1 131.4 15.701 Q 135.403 15.701 138.179 16.777 A 10.29 10.29 0 0 1 140.75 18.201 A 8.125 8.125 0 0 1 143.895 23.783 A 12.034 12.034 0 0 1 144 25.401 Q 144 29.501 141.75 32.901 A 16.795 16.795 0 0 1 136.169 38.133 A 19.667 19.667 0 0 1 135.7 38.401 Q 140.849 46.711 144.488 51.513 A 71.651 71.651 0 0 0 145.25 52.501 Q 149.097 57.397 152.395 59.498 A 18.401 18.401 0 0 0 152.4 59.501 Q 155.7 61.601 159.5 61.601 A 0.133 0.133 0 0 1 159.615 61.673 Q 159.685 61.786 159.698 62.074 A 3.028 3.028 0 0 1 159.7 62.201 Q 159.7 62.645 159.59 62.76 A 0.121 0.121 0 0 1 159.5 62.801 Z M 90.5 54.401 L 83.6 39.401 L 68.9 39.401 L 64.5 50.501 Q 63.269 53.732 62.985 55.661 A 7.211 7.211 0 0 0 62.9 56.701 A 5.716 5.716 0 0 0 63.076 58.167 A 3.709 3.709 0 0 0 64.75 60.451 A 6.294 6.294 0 0 0 66.279 61.117 Q 67.766 61.56 69.907 61.597 A 22.863 22.863 0 0 0 70.3 61.601 A 0.589 0.589 0 0 1 70.516 61.637 Q 70.773 61.738 70.797 62.117 A 1.292 1.292 0 0 1 70.8 62.201 A 1.052 1.052 0 0 1 70.779 62.423 Q 70.709 62.745 70.41 62.792 A 0.702 0.702 0 0 1 70.3 62.801 Q 68.945 62.801 66.692 62.637 A 111.02 111.02 0 0 1 66.2 62.601 A 81.196 81.196 0 0 0 63.177 62.439 A 64.147 64.147 0 0 0 61 62.401 Q 58.5 62.401 55.1 62.601 Q 52.539 62.771 50.853 62.796 A 37.365 37.365 0 0 1 50.3 62.801 A 0.366 0.366 0 0 1 50.09 62.743 Q 49.9 62.614 49.9 62.201 A 1.331 1.331 0 0 1 49.915 61.989 Q 49.975 61.618 50.271 61.601 A 0.505 0.505 0 0 1 50.3 61.601 Q 52.326 61.601 53.797 61.238 A 7.484 7.484 0 0 0 55.2 60.751 Q 56.577 60.1 57.779 58.484 A 13.187 13.187 0 0 0 58.5 57.401 A 29.397 29.397 0 0 0 59.399 55.773 Q 60.333 53.964 61.479 51.307 A 135.617 135.617 0 0 0 62.2 49.601 L 76.5 14.501 A 0.864 0.864 0 0 1 76.64 14.294 A 0.603 0.603 0 0 1 77.1 14.101 A 0.597 0.597 0 0 1 77.301 14.132 Q 77.475 14.194 77.558 14.377 A 0.726 0.726 0 0 1 77.6 14.501 L 93.7 49.101 A 175.801 175.801 0 0 0 94.934 51.707 Q 96.688 55.326 97.85 57.201 Q 98.865 58.838 99.923 59.81 A 6.381 6.381 0 0 0 101.05 60.651 A 6.458 6.458 0 0 0 102.694 61.3 Q 103.881 61.601 105.4 61.601 A 0.366 0.366 0 0 1 105.61 61.658 Q 105.8 61.787 105.8 62.201 A 1.331 1.331 0 0 1 105.785 62.412 Q 105.725 62.783 105.429 62.8 A 0.505 0.505 0 0 1 105.4 62.801 Q 103.667 62.801 99.896 62.615 A 345.581 345.581 0 0 1 99.6 62.601 Q 95.869 62.404 94.066 62.401 A 33.45 33.45 0 0 0 94 62.401 Q 92.6 62.401 90 62.601 Q 87.6 62.801 86.3 62.801 A 0.366 0.366 0 0 1 86.09 62.743 Q 85.9 62.614 85.9 62.201 A 1.331 1.331 0 0 1 85.915 61.989 Q 85.975 61.618 86.271 61.601 A 0.505 0.505 0 0 1 86.3 61.601 A 16.76 16.76 0 0 0 87.712 61.545 Q 89.124 61.425 90.037 61.046 A 4.099 4.099 0 0 0 90.35 60.901 Q 91.7 60.201 91.7 58.501 Q 91.7 57.052 90.716 54.865 A 20.739 20.739 0 0 0 90.5 54.401 Z M 393.82 62.927 A 25.306 25.306 0 0 0 401.3 64.001 Q 408.5 64.001 414.65 60.551 Q 420.8 57.101 424.4 51.251 Q 428 45.401 428 38.601 Q 428 32.601 425.15 27.101 Q 422.3 21.601 417 18.201 A 20.767 20.767 0 0 0 411.658 15.76 A 24.387 24.387 0 0 0 404.7 14.801 A 28.931 28.931 0 0 0 402.574 14.879 A 30.399 30.399 0 0 0 391.95 17.701 Q 385.7 20.601 381.6 26.301 Q 377.5 32.001 377.5 39.801 Q 377.5 46.301 380.45 51.851 Q 383.4 57.401 388.85 60.701 A 22.116 22.116 0 0 0 393.82 62.927 Z M 404 62.001 Q 412.3 62.001 417.25 56.501 Q 421.709 51.546 422.151 43.101 A 36.365 36.365 0 0 0 422.2 41.201 Q 422.2 34.501 419.8 28.951 A 20.875 20.875 0 0 0 414.842 21.831 A 20.246 20.246 0 0 0 412.7 20.101 A 18.049 18.049 0 0 0 404.772 17.033 A 23.677 23.677 0 0 0 401.4 16.801 A 21.521 21.521 0 0 0 395.772 17.496 A 15.199 15.199 0 0 0 388.05 22.301 A 18.473 18.473 0 0 0 384.275 29.542 Q 383.513 32.283 383.347 35.538 A 36.428 36.428 0 0 0 383.3 37.401 Q 383.3 44.201 385.75 49.801 A 21.488 21.488 0 0 0 390.12 56.351 A 20.165 20.165 0 0 0 392.9 58.701 A 18.168 18.168 0 0 0 401.66 61.885 A 23.112 23.112 0 0 0 404 62.001 Z M 122.3 24.301 L 122.3 38.501 A 15.077 15.077 0 0 0 123.614 38.712 Q 125.095 38.888 127.111 38.9 A 49.796 49.796 0 0 0 127.4 38.901 Q 133.125 38.901 135.712 36.63 A 6.075 6.075 0 0 0 136.2 36.151 Q 138.243 33.903 138.617 29.952 A 19.699 19.699 0 0 0 138.7 28.101 A 17.95 17.95 0 0 0 138.255 23.912 Q 136.905 18.307 131.461 17.248 A 14.466 14.466 0 0 0 128.7 17.001 Q 124.7 17.001 123.5 18.701 Q 122.3 20.401 122.3 24.301 Z M 75.7 22.401 L 69.6 37.801 L 82.8 37.801 L 75.7 22.401 Z" vector-effect="non-scaling-stroke"/></g>




<path id="parthenon" xmlns="http://www.w3.org/2000/svg" d="M471.877,381.07h-4.949v-11.694c0-2.209-1.791-4-4-4h-22.526V231.934h3.847c2.209,0,4-1.791,4-4c0-2.209-1.791-4-4-4h-3.847  v-4.556h6.626c2.209,0,4-1.791,4-4l0.003-14.855L466.636,165c0.466-1.061,0.449-2.273-0.047-3.321  c-0.496-1.048-1.423-1.828-2.54-2.14l-207.887-57.993V80.018c0-2.209-1.791-4-4-4s-4,1.791-4,4v19.297l-6.223-1.735V75.114  c0-2.209-1.791-4-4-4s-4,1.791-4,4V97.58l-6.223,1.735V80.018c0-2.209-1.791-4-4-4c-2.209,0-4,1.791-4,4v21.529L11.828,159.54  c-1.117,0.311-2.044,1.092-2.54,2.14c-0.497,1.048-0.514,2.26-0.047,3.321l15.604,35.523l0.003,14.855c0,2.209,1.791,4,4,4h5.645  v4.556h-2.866c-2.209,0-4,1.791-4,4c0,2.209,1.791,4,4,4h2.866v133.441H12.948c-2.209,0-4,1.791-4,4v11.694H4c-2.209,0-4,1.791-4,4  v15.693c0,2.209,1.791,4,4,4h467.877c2.209,0,4-1.791,4-4V385.07C475.877,382.861,474.086,381.07,471.877,381.07z M432.402,365.375  h-10.637V231.934h10.637V365.375z M64.978,223.934H61.13v-4.556h27.545v4.556H85.81c-2.209,0-4,1.791-4,4c0,2.209,1.791,4,4,4h2.866  v133.441H61.13V231.934h3.847c2.209,0,4-1.791,4-4C68.978,225.725,67.187,223.934,64.978,223.934z M107.312,219.378v4.556H96.675  v-4.556H107.312z M96.675,231.934h10.637v133.441H96.675V231.934z M115.312,231.934h3.847c2.209,0,4-1.791,4-4c0-2.209-1.791-4-4-4  h-3.847v-4.556h27.545v4.556h-2.866c-2.209,0-4,1.791-4,4c0,2.209,1.791,4,4,4h2.866v133.441h-27.545V231.934z M161.494,219.378  v4.556h-10.637v-4.556H161.494z M150.857,231.934h10.637v133.441h-10.637V231.934z M169.494,231.934h3.847c2.209,0,4-1.791,4-4  c0-2.209-1.791-4-4-4h-3.847v-4.556h27.545v4.556h-2.866c-2.209,0-4,1.791-4,4c0,2.209,1.791,4,4,4h2.866v133.441h-27.545V231.934z   M215.675,219.378v4.556h-10.637v-4.556H215.675z M205.039,231.934h10.637v133.441h-10.637V231.934z M223.675,231.934h3.847  c2.209,0,4-1.791,4-4c0-2.209-1.791-4-4-4h-3.847v-4.556h27.545v4.556h-2.866c-2.209,0-4,1.791-4,4c0,2.209,1.791,4,4,4h2.866  v133.441h-27.545V231.934z M269.857,219.378v4.556H259.22v-4.556H269.857z M259.22,231.934h10.637v133.441H259.22V231.934z   M277.857,231.934h3.847c2.209,0,4-1.791,4-4c0-2.209-1.791-4-4-4h-3.847v-4.556h27.545v4.556h-2.866c-2.209,0-4,1.791-4,4  c0,2.209,1.791,4,4,4h2.866v133.441h-27.545V231.934z M324.039,219.378v4.556h-10.637v-4.556H324.039z M313.402,231.934h10.637  v133.441h-10.637V231.934z M332.039,231.934h3.847c2.209,0,4-1.791,4-4c0-2.209-1.791-4-4-4h-3.847v-4.556h27.545v4.556h-2.866  c-2.209,0-4,1.791-4,4c0,2.209,1.791,4,4,4h2.866v133.441h-27.545V231.934z M378.22,219.378v4.556h-10.637v-4.556H378.22z   M367.583,231.934h10.637v133.441h-10.637V231.934z M386.22,231.934h3.847c2.209,0,4-1.791,4-4c0-2.209-1.791-4-4-4h-3.847v-4.556  h27.545v4.556h-2.866c-2.209,0-4,1.791-4,4c0,2.209,1.791,4,4,4h2.866v133.441H386.22V231.934z M432.402,223.934h-10.637v-4.556  h10.637V223.934z M443.031,171.973v23.711H32.845v-23.711H443.031z M105.838,163.973l132.101-36.851l132.1,36.851H105.838z   M18.42,166.005l219.519-61.237l219.518,61.237l-6.425,14.627v-12.659c0-2.209-1.791-4-4-4h-47.222l-160.796-44.855  c-0.703-0.197-1.446-0.197-2.149,0L76.068,163.973H28.845c-2.209,0-4,1.791-4,4v12.659L18.42,166.005z M32.849,203.684h410.179  v7.694H32.849V203.684z M42.494,219.378H53.13v4.556H42.494V219.378z M42.494,231.934H53.13v133.441H42.494V231.934z   M16.948,373.375h441.98v7.694H16.948V373.375z M467.877,396.763H8v-7.693h459.877V396.763z"/>


    </svg>
    
  </div>
  <div class="half2">
    <div class="row ">
      <div class="column">
        <div class="hovereffect">
  <img src='https://images.unsplash.com/photo-1590426185260-8506c507b91c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
       <div class="overlay">
         <h2 id="text">Parthenon
temple, Athens, Greece</h2>
           
         </div>
        </div>
        
         <div class="hovereffect">
        <img src='https://images.unsplash.com/photo-1555368062-a9b335f1e997?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''> 
          <div class="overlay">
         <h2>Temple that dominates the hill of the Acropolis at Athens. It was built in the mid-5th century BCE and dedicated to the Greek goddess Athena Parthenos (“Athena the Virgin”).</h2>
           
         </div>
        </div>
      </div>
      <div class="column"> 
        <div class="hovereffect">
 <img src='https://images.unsplash.com/photo-1591865986097-77712322981b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          <div class="overlay">
            <h2> The temple is generally considered to be the culmination of the development of the Doric order, the simplest of the three Classical Greek architectural orders.</h2>
          </div>
        </div>
        <div class="hovereffect">
        <img src='https://images.unsplash.com/photo-1594048234320-f2caf3dac5c0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          <div class="overlay">
            <h2>Work began in 447 BCE, and the building itself was completed by 438</h2>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="hovereffect">
<img src='https://images.unsplash.com/photo-1582562850071-6ef30526088a?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          <div class="overlay">
            <h2 style="font-size:9px;">In 1801–03 a large part of the sculpture that remained was removed, with Turkish permission, by the British nobleman Thomas Bruce and sold in 1816 to the British Museum in London.</h2>
          </div>
        </div>
        <div class="hovereffect">
          
 <img src='https://images.unsplash.com/photo-1578741904500-26f8354b22cd?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          <diva class="overlay">
            <h2> The east and west ends of the interior of the building are each faced by a portico of six columns. Measured by the top step of the base, the building is 101.34 ft(30.89 metres) wide and 228.14 ft(69.54 metres) long.</h2>
            </div>
      </div>
      <div class="column">
        <div class="hovereffect">
        <img src='https://images.unsplash.com/photo-1558258869-ffa255e879fe?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          <div class="overlay">
            <h2>Although the rectangular white marble Parthenon has suffered damage over the centuries, including the loss of most of its sculpture, its basic structure has remained intact.</h2>
          </div>
        </div>
        <div class="hovereffect">
        <img src="https://images.unsplash.com/photo-1590426185260-8506c507b91c?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt=''>
          <div class="overlay">
            <h2 style="font-size:9px">The Parthenon was the supreme expression of the ancient Greek architectural genius and represents the marriage of simplicity and power.</h2>
          </div>
        </div>
  </div>
</div>
    </div>
  </div>
!

CSS 

              
                
html, body, .grid-container { height: 100%; margin: 0 auto; }

.grid-container {margin-bottom:10%;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 2.4fr 0.1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px 1px;
  grid-template-areas: "half half half half" "half2 half2 half2 half2";
}

.half { grid-area: half; 
  text-align:center;
margin:-5% 0 6% 0%;
 max-height:100%;
  max-width:100%;
}
 

.half2 { grid-area: half2;
 border: 10px ridge #4E342E;
  height:100%;
  margin: 0 5% 0.5% 5%;
  
}
.row,column{margin:0 auto;}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 2% 4px;
}
.column {
  flex: 20%;
  max-width: 25%;
  padding: 0 4px;
  
}
.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
  max-height: 100%;
 }
 
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 25%;
    max-width: 100%;
  }
   .half {
    flex: 25%;
    max-width: 100%;
  }
}
.hovereffect .overlay {
  position: absolute;
  overflow: hidden;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  border-bottom: 1px solid #FFF;
  border-top: 1px solid #FFF;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0,1);
  -ms-transform: scale(0,1);
  transform: scale(0,1);
}

.hovereffect:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all 0.35s;
  transition: all 0.35s;
}

.hovereffect:hover img {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
  filter: brightness(0.6);
  -webkit-filter: brightness(0.6);
}

.hovereffect h2 {
  font-family: 'GFS Neohellenic', sans-serif;

  text-transform: uppercase;
  text-align: center;
  position: relative;
  font-size: 12px;
  background-color: transparant;
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
}
.hovereffect {
 max-width: 100%;
  max-height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}
.hovereffect:hover h2 {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
!

JS 

              
                TweenLite.set("header", {visibility:"visible"})
var tl = new TimelineMax({repeat:-1, repeatDelay:0.5, delay:1});
tl.to("#word", 1, {morphSVG:"#parthenon" , ease:Back.easeInOut})
.to("#parthenon", 1, {morphSVG:"#word", ease:Back.easeOut}, "+=0.5")
  .to("#word", 1, {morphSVG:word,  ease:Back.easeOut}, "+=0.5")
!
999px

Console