CROWBIRD'S CUSTOM CSS CATALOG
COLUMN LINK LAYOUT
scroll down for html and style codes!
HTML
<div class="css-layout-by-crowbirdie"><div class="links"><div class="credits"><a href="https://janitorai.com/profiles/041e1db0-85b9-4127-8cc8-6d44c947412b_profile-of-crowbirdie">layout by crowbirdie</a></div><div class="container">
      <div class="left-image">
      <img src="https://i.imgur.com/86ziY2u.png" alt="Left-Image">
      </div>
      <div class="right-images">
      <a href="https://janitorai.com/">
      <img src="https://i.imgur.com/euLSuMH.png" alt="image-1">
      </a>
      <a href="https://janitorai.com/">
      <img src="https://i.imgur.com/euLSuMH.png" alt="image-2">
      </a>
      <a href="https://janitorai.com/">
      <img src="https://i.imgur.com/euLSuMH.png" alt="image-3">
      </a>
    </div>
  </div>
</div>
STYLE
<style>
.container {
  display: flex;
}
.left-image {
  flex: 1;
  flex-basis: 28%; /*Adjust width as needed*/
}
.right-images {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-left: -14%; /*ADJUST THESE TO MOVE RIGHT PICTURES*/
  margin-top: 7.5%; /*ADJUST THESE TO MOVE RIGHT PICTURES UP AND DOWN*/
}
.left-image img {
  width: 92%;
  float: right;
  margin-right: -8%; /*ADJUST THIS TO MOVE LEFT PICTURE*/
}
.right-images img {
  width: 70%;
  float: left;
  margin-left: 2%; /*ADJUST THESE TO MOVE RIGHT PICTURES*/
  margin-bottom: 6%; /*ADJUST THESE TO MOVE RIGHT PICTURES*/
  border: 1px solid rgb(255 255 255 / 67%); /*color of border around pictures*/
  transition: box-shadow 0.6s; /*this is the animation for the glow-change speed if desired*/
}
.right-images img:hover {
  box-shadow: 0 0 10px 2px rgb(255 255 255 / 67%); /*color of the glow effect transition*/
}
.image-container {
  position: relative;
  display: inline-block;
}
.links { /*this is what keeps everything contained at the right size*/
  margin: 12px auto;
  padding: 13px;
  overflow: hidden;
  display: flex;
  justify-content: center; /*Center the content*/
  max-width: 526px; /*makes sure formatting is good for mobile w/o the need for media inquiry*/
  position: relative;
}
.credits a {
  color: grey;
  font-family: times;
  font-variant: all-small-caps;
  font-size: 12px;
  text-align: left;
  position: absolute;
  bottom: -1%;
  opacity: .5;
  left: 5%;
  z-index: 10;
}
body:not(:has(a[href*="https://janitorai.com/profiles/041e1db0-85b9-4127-8cc8-6d44c947412b_profile-of-crowbirdie"])) .links {
  display: none;
}
body:not(:has(a[href*="https://janitorai.com/profiles/041e1db0-85b9-4127-8cc8-6d44c947412b_profile-of-crowbirdie"])) .css-layout-by-crowbirdie::before {
  content: "please include credit!";
  color: red;
  font-size: 5vw;
  width: 100%;
  display: block;
  text-align: center;
}
</style>