Selectively creating double-wide thumbnails within an index page (Avenue)

Site URL: https://www.thislandisdigital.com/test-rectangles

I've asked a less clear version of this question and wanted to try again with more clarity. The ideal solution would be flexible enough to be reapplied to achieve various similar arrangements. The immediate solution would strictly allow for the one requested arrangement. I am not amazing at CSS, so feel free to over-explain if you'd like.

By default the Avenue template's indexes display a set of pages with identically proportioned thumbnails. In site styles, I can change the image ratio and every thumbnail will always occupy a single grid space.

My current design uses square thumbnails (ratio 100, or 1:1) arranged in rows of 4 or, on mobile, rows of 2. In other words, I've created a perfect grid of squares. This design is largely inspired by ArtStation which sets a familiar standard in my industry.

What I want is for the first two thumbnails to occupy two spaces in the grid for a ratio of 2:1. Because the rows for both desktop (4) and mobile (2) are divisible by 2, there is space for this in concept. Below are images of what I have and what I need.

<<< Permission to stop reading here if you've already got an idea. Check images for reference. ⏰

So far I've been able to selectively target individual images and their backgrounds which I used to apply hover effects. I tried various methods of resizing images but often struggled with automatic vertical scaling (I'm looking for double wide with no change to height). Other attempts only scaled or skewed the image, leaving some part of the overall "thumbnail" structure at its original size. I don't know enough CSS to be able to understand that structure just yet. Below is the code I use to identify and affect particular thumbnails (modifying the "n" to a specific index). It's also how I'll assign rectangular hover images to the double-wide images.

a.project:nth-child(n):hover {
  img { // On hovering over a specific block, affect the image at that selection.
  opacity: 20%;
  filter: blur(2px);
  transition: all 0.5s;
  }
  .content-fill { // On hovering over a specific block, affect the filled color at that selection.
  background-image: url(https://static1.squarespace.com/static/5338f2a1e4b012d5a0b4b9e7/t/5e852b782dc9304ac485f646/1585785720583/Thumbnails_HoverImage-Square_01.png);
  background-size: cover; //or: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  }
}

I then tried to assign a {display: grid;} with grid-template-areas to an upper element on an index page. With this I successfully arranged the thumbnails as desired BUT had no control over vertical scaling. The double-wide thumbnails ended up appearing double-tall as well. My assumption here is that the width of the thumbnails was directly tied to the browser window (up to the maximum width), while the height had no obvious point of reference. Both my 1:1 thumbs and my 2:1 thumbs had a height of 512px, yet the height of each row was not identical. Instead, the images were locked to a 1:1 ratio, so if an image was assigned a width of two grid tiles, their height (while still one grid space tall) was doubled as well. I was able to rescale the image itself, but apparently not the entire container which stayed the same. I may have even been able to scale the grid space of each image at one point, but the clickable square and backgrounds and such were overlapping and jammed behind one another. Just lots and lots of weirdness. Below is some code for my attempts and a link to a page to test it.

// Name the generic children of the layout in whatever order they appear.
#collection-5c89d82aee6eb05083075575 #projectThumbs>div {
  a:nth-of-type(n){width: 100%;}
  
  a:nth-of-type(1){grid-area: one;} a:nth-of-type(2){grid-area: two;}
  a:nth-of-type(3){grid-area: three;} a:nth-of-type(4){grid-area: four;}
  a:nth-of-type(5){grid-area: five;} a:nth-of-type(6){grid-area: six;}  
  a:nth-of-type(7){grid-area: seven;} a:nth-of-type(8){grid-area: eight;}
  a:nth-of-type(9){grid-area: nine;} a:nth-of-type(10){grid-area: ten;}
  a:nth-of-type(11){grid-area: eleven;} a:nth-of-type(12){grid-area: twelve;}
  a:nth-of-type(13){grid-area: thirteen;} a:nth-of-type(14){grid-area: fourteen;}
  a:nth-of-type(15){grid-area: fifteen;} a:nth-of-type(16){grid-area: sixteen;}
}

// Assign a grid display to the wrapper beneath #projectThumbs.
#collection-5e83973d00d63d75669cbd19 #projectThumbs>div {
  display: grid; // Display the wrapper element as a grid.
  grid-template-areas: // CENTER ISLANDS
    "one one two two" // Two big
    "three four five six" // Four small
    "seven eight eight nine" //Small big small
    "ten eleven twelve thirteen" //Four small
    "fourteen fifteen fifteen sixteen"; // Small big small
}

// Customize the larger thumbnails.
// At this point I was hopelessly lost, so this code is mostly to help isolate the specific indices needing double widths.
#collection-5e83973d00d63d75669cbd19 #projectThumbs {
  a.project:nth-child(1) img, a.project:nth-child(2) img, a.project:nth-child(8) img {
    height: 50% !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  a.project:nth-child(1), a.project:nth-child(2), a.project:nth-child(8){
    height: 50% !important;
    width: 100% !important;
  }
}