SO-73345247

by David Thomas

HTML

<div class="divss">
  <div class="semisquarel"></div>
  <img src="images/Path 16.png" width="37px" height="50px">
  <p class="small">BEVERAGES</p>
  <p class="big">PRODUCT</p>
  <p class="small">RUM, WHISKEY, VODKA AND MORE</p>
  <p class="big">RANGE</p>
  <div class="semisquarer"></div>
</div>

CSS

:root {
  --accentColor: hsl(0 100% 100% / 1);
  --fs-large: 50px;
  --fs-small: 15px;
  --imageWidth: 135px;
  --border: 2px solid var(--accentColor);
  --concealedBorder: 0 none transparent;
}

*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.divss {
  background-color: #bbb;
  display: grid;
  justify-items: center;
  grid-template-columns: 1fr var(--imageWidth) max-content var(--imageWidth) 1fr;
  grid-template-rows: repeat(5, min-content);
  line-height: 2;
  margin-block-start: 40px;
  margin-inline: auto;
}

.divss :is(img,p){
  grid-column: 3;
}

.small {
  font-size: var(--fs-small);
  letter-spacing: 1.5px;
}

.big {
  font-size: var(--fs-large);
}


.semisquarel,
.semisquarer {
  aspect-ratio: 1;
  inline-size: var(--imageWidth);
  border: var(--border);
  grid-row: 3 / -1;
  align-self: center;
}

.semisquarel {
  grid-column: 2;
  border-inline-end: var(--concealedBorder);
}

.semisquarer {
  grid-column: 4;
  border-inline-start: var(--concealedBorder);
}