Template:Vertical thumbnail/styles.css

/* Container for the entire card */
.vertical-thumb {
  vertical-align: top;
  width: 170px;
  padding: 0 30px 20px 0; 
  background: transparent !important;
  border: 0;
  box-sizing: border-box;
  display: inline-block;
}

/* Alignment Modifier Classes */
.vertical-thumb--align-center { text-align: center; }
.vertical-thumb--align-left   { text-align: left; }
.vertical-thumb--align-right  { text-align: right; }

/* The Square Image Container (Padding Hack) */
.vertical-thumb__imgwrap {
  width: 100%;
  height: 0;
  padding-bottom: 100%; /* This forces the height to match the width (1:1) */
  position: relative;   /* Necessary for the absolute image inside */
  overflow: hidden;
  margin-bottom: 8px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

/* Ensure the image fills the square correctly */
.vertical-thumb__imgwrap img,
.vertical-thumb__imgwrap .mw-file-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* Keeps the aspect ratio of the photo itself */
}

/* Unified Content Area */
.vertical-thumb__content {
  font-size: 0.85em;
  line-height: 1.3;
  color: #202122;
  word-wrap: break-word;
}

.vertical-thumb__content a {
  font-weight: bold;
  text-decoration: none;
  color: #0645ad;
}

.vertical-thumb__content a:hover {
  text-decoration: underline;
}