CSS

having an issue with getting images to display as squares in 1:1 aspect ration on wordpress.
Im pulling in Woocomece gallery images and displaying them on the page.

However as you can see in the attached screenshot the object-fill: cover; or object-fill: fill; or even object-fill: none; is not working.
They are all being treated like object-fill: contain; but I need to show square thumbnails for images of all different aspect ratios.

Here is the code I am currently trying to use:

.woocommerce-product-gallery__image {
border: solid 5px #CCC;
background-color: #CCC;

My custom font CSS is not working in Squarespace 7.0. I have uploaded the font which is this font: https://connary.com/wayfinder.html

I am using this code to add the font, but nothing is changing and the font is not displayed.

@font-face {
font-family: 'Wayfinder';
src: url('https://static1.squarespace.com/static/603e9a9da51e5672d8d9633a/t/60c8026984d82a4fe9c58594/1623720553471/WayfinderCF-Thin.otf');
  }
h1 {font-family: 'Wayfinder';}

I am trying to change the color of the headline of https://www.decorad.com/ and it doesnt seem to work.
Could anyone help me?

I've got a container DIV which has a position of relative. Inside this a text input box and another DIV (resultsContainer). This second DIV has position absolute, z-index of 9999 and has children DIV's added by JS fetch response looping through JSON data.

It works on desktop/laptop browers fine.

The resultsContainer is showing on top of everything fine and provides a list of options.

When on IOS Chrome is shows behind everything else on the page? (as if z-index is being ignored.

I've googled it, gave me this option

    -webkit-transform: translate3d(0,0,1px);

hello, i need help;
ive used https://codepen.io/tmrDevelops/pres/jPayjd and basically copy pasted the code, but i need it to go over the whole page and i want to change the backround to invisible, so i basically only have the lightneing strikes.... can someone help me out?