/* APPLICATION: https://codepen.io/movarsky/pen/OJjMeRd */


 .gallery {
	 display: flex;
	 flex-wrap: wrap;
	 margin-bottom: 4rem;
	 margin-right: -2px;
}
 .gallery .item {
	 line-height: 0;
	 display: contents;
}
 .gallery .item .img {
	 background-size: cover;
	 background-position: center;
	 background-repeat: no-repeat;
	 position: relative;
}
 .gallery .item .img::before {
	 position: absolute;
	 content: "";
	 display: block;
	 background-image: url("data:image/svg+xml,%3Csvg width='61' height='61' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.76581 41.8827c-.29383-.647-.56806-1.3332-.80312-1.9606-1.93564-5.3665-2.1917-11.1959-.73409-16.7117 1.45761-5.5159 4.55971-10.4563 8.8931-14.16324 4.3334-3.70695 9.6924-6.00446 15.3631-6.58652 5.6708-.58205 11.3841.57899 16.379 3.32847.2286.1248.4974.15359.7472.08006.2498-.07354.4601-.24338.5848-.47216.1247-.22879.1535-.49778.08-.7478-.0735-.25001-.2432-.46058-.4717-.58537C39.4631 1.12917 33.3562-.108803 27.2953.514513 21.2344 1.13783 15.5066 3.5929 10.8735 7.55331 6.24045 11.5137 2.92159 16.7918 1.35822 22.6858-.205144 28.5799.0610456 34.8106 2.1214 40.5495c.25465.7254.54847 1.4508.86188 2.1566.04731.1252.11971.2393.21276.3354.09306.0961.20478.1721.32829.2233.12352.0513.2562.0767.38989.0746.13369-.002.26555-.0314.38745-.0864.1219-.0549.23126-.1343.32136-.2332.09009-.0989.159-.2152.20248-.3417.04348-.1266.06062-.2607.05035-.3941-.01027-.1334-.04772-.2633-.11005-.3817v-.0196ZM55.8126 14.4155c-.1376-.221-.3574-.3782-.6108-.437-.2535-.0588-.5199-.0145-.7407.1233s-.3779.3577-.4367.6114c-.0587.2537-.0144.5204.1233.7414 3.9352 6.3228 5.1998 13.9513 3.5155 21.2073s-6.1795 13.5452-12.4967 17.484c-6.3173 3.9387-13.9391 5.2044-21.1887 3.5186-7.2497-1.6857-13.5333-6.1849-17.46861-12.5077-.06817-.1094-.1572-.2044-.26202-.2793-.10481-.075-.22336-.1286-.34886-.1577-.12551-.0292-.25552-.0333-.38261-.0121-.12709.0212-.24877.0672-.35809.1354-.10933.0682-.20416.1573-.27907.2622-.07492.1049-.12846.2236-.15756.3492-.0291.1256-.0332.2557-.01206.383.02114.1272.06711.2489.13528.3584 4.21063 6.7647 10.9337 11.5783 18.6903 13.3817 7.7566 1.8035 15.9113.4491 22.6701-3.7653 6.7589-4.2143 11.5682-10.9434 13.3701-18.7068 1.8018-7.7634.4486-15.9252-3.7621-22.69ZM51.3464 11.7884c.0829.103.1859.1882.3026.2504.1167.0622.2448.1.3765.1114.1317.0113.2644-.0042.3899-.0456.1256-.0414.2415-.1078.3408-.1952.0992-.0875.1798-.1941.2368-.3135.0569-.1194.0892-.2491.0947-.3813.0056-.1322-.0157-.2642-.0625-.388-.0468-.1237-.1181-.2368-.2097-.3322-.7263-.82644-1.498-1.61187-2.3114-2.35264-.0935-.09538-.2055-.17063-.3291-.22112-.1236-.05049-.2562-.07515-.3896-.07248-.1335.00268-.265.03263-.3865.08803-.1215.05539-.2304.13506-.32.23411-.0896.09905-.158.21539-.2011.34187-.043.12648-.0598.26043-.0492.39362.0106.1332.0482.26283.1107.38093.0624.1181.1483.22218.2524.30584.7581.69164 1.4775 1.42464 2.1547 2.19584Z' fill='%23fff'/%3E%3Cpath d='M31.3265 29.5117V15.435c0-.26-.1032-.5093-.2868-.6932-.1837-.1838-.4328-.2871-.6926-.2871-.2597 0-.5089.1033-.6925.2871-.1837.1839-.2869.4332-.2869.6932v14.0571H15.8323c-.2598 0-.5089.1032-.6926.2871-.1836.1838-.2868.4331-.2868.6931 0 .26.1032.5093.2868.6932.1837.1838.4328.2871.6926.2871h13.5354v15.1158c0 .26.1032.5093.2869.6931.1836.1839.4328.2871.6925.2871.2598 0 .5089-.1032.6926-.2871.1836-.1838.2868-.4331.2868-.6931V31.4722H44.862c.2597 0 .5088-.1033.6925-.2871.1837-.1838.2869-.4332.2869-.6932 0-.26-.1032-.5093-.2869-.6931-.1837-.1839-.4328-.2871-.6925-.2871H31.3265Z' fill='%23fff'/%3E%3C/svg%3E");
	 height: 60px;
	 width: 60px;
	 left: 50%;
	 top: 50%;
	 transform: translate(-50%, -50%) scale(-0.7);
	 opacity: 0;
	 z-index: 2;
	 transition: 0.2s;
	 transform-origin: center center;
}
 .gallery .item .img::after {
	 content: "";
	 display: block;
	 position: absolute;
	 background: #021107;
	 top: 0;
	 left: 0;
	 right: 0;
	 bottom: 0;
	 opacity: 0;
	 z-index: 1;
	 transition: 0.2s;
}
 .gallery .item:hover .img::before {
	 transform: translate(-50%, -50%) scale(1);
	 opacity: 1;
}
 .gallery .item:hover .img::after {
	 opacity: 0.2;
}
 .gallery.col-3 {
	 margin-right: -2px;
}
 .gallery.col-3 .item .img {
	 width: calc(33.3% - 2px);
	 padding-bottom: calc(33.3% - 2px);
	 margin: 0 2px 2px 0;
}
 @media only screen and (min-width: 1px) and (max-width: 1023px) {
	 .gallery.col-3 .item .img {
		 width: calc(50% - 2px);
		 padding-bottom: calc(50% - 2px);
		 margin: 0 2px 2px 0;
	}
}