make top border shorter

.divss {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
  line-height: 2px;
}

.small {
  font-family: futuraptdemi;
  font-size: 15px;
  letter-spacing: 1.5px;
}

.big {
  font-family: futuraptdemi;
  font-size: 50px;
}

.semisquarel {
  position: absolute;
  margin-right: 400px;
  margin-top: 100px;
  width: 135px;
  height: 135px;
  border-left: rgb(8, 8, 8) solid 2px;
  border-bottom: rgb(3, 3, 3) solid 2px;
  border-right: none;
}

.semisquarer {
  margin-top: 100px;
  margin-left: 375px;
  position: absolute;
  width: 135px;
  height: 135px;
  border-left: none;
  border-bottom: rgb(10, 10, 10) solid 2px;
  border-right: rgb(7, 7, 7) solid 2px;
}

.semisquarel::before {
  content: "";
  position: absolute;
  bottom: 133px;
  left: -1px;
  border-top: 2px solid black;
  width: 50%;
}
.semisquarer::before {
  content: "";
  position: absolute;
  bottom: 133px;
  left: 68px;
  border-top: 2px solid black;
  width: 50%;
}

.letters {
  text-align: center;
  margin-top: -7px;
}

.letters .small {
  margin-top: 17px;
}

.letters .big {
  margin-top: 40px;
}

.letters .small2 {
  margin-top: 64px;
}

.letters .big2 {
  margin-top: 61px;
  font-size: 50px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/style.css">
    <title>Document</title>
</head>
<body>
    <div class="divss">
        <div class="semisquarel"></div>
        <img src="images/Path 16.png" width="37px" height="50px"></br>
        <div class="letters">
        <p class="small">BEVERAGES</p>
        <p class="big">PRODUCT</p>
        <p class="small2">RUM, WHISKEY, VODKA AND MORE</p>
        <p class="big2">RANGE</p>
        </div>
        <div class="semisquarer"></div>
      </div>
</body>
</html>

.divss {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #bbb;
  padding: 40px 0;
}
.inner_wrapper {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  line-height: 2px;
}
.small {
  font-family: futuraptdemi;
  font-size: 15px;
  letter-spacing: 1.5px;
}

.big {
  font-family: futuraptdemi;
  font-size: 50px;
}
.semisquarel,
.semisquarer {
  position: relative;
  top: 38px;
  width: 135px;
  height: 135px;
  border-top: white solid 2px;
  border-bottom: white solid 2px;
}
.semisquarel {
  border-left: white solid 2px;
  border-right: none;
  left: 20px;
}
.semisquarer {
  border-left: none;
  border-right: white solid 2px;
  left: -20px
}

<div class="divss">
  <div class="semisquarel"></div>
  <div class="inner_wrapper">
    <img src="images/Path 16.png" width="37px" height="50px"></br>
    <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>
  <div class="semisquarer"></div>
</div>

/* defining various custom properties for later use: */
:root {
  --accentColor: hsl(0 100% 100% / 1);
  --fs-large: 50px;
  --fs-small: 15px;
  --imageWidth: 135px;
  --border: 2px solid var(--accentColor);
  --concealedBorder: 0 none transparent;
}

/* a simple (incomplete) reset, to remove default margin
   and padding, and to have all elements sized according
   to the same 'border-box' algorithm, in which the
   stated width includes border-sizes and padding: */
*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.divss {
  background-color: #bbb;
  /* switching to grid layout instead of flex; since we
     clearly have three columns rather than just one: */
  display: grid;
  /* centering all elements within their grid-column */
  justify-items: center;
  /* defining five columns,
     1: one fraction of the remaining available space,
     2: one column equal to the CSS custom property, 
     3: one column to take the elements's (of that column)
        maximum content size,
     4: another column equal to the CSS custom property,
     5: and one further column taking one fraction of the
        remaining space available: */
  grid-template-columns: 1fr var(--imageWidth) max-content var(--imageWidth) 1fr;
  /* using the CSS repeat() function to create five rows, each taking the minimum-
     size of the content within that row: */
  grid-template-rows: repeat(5, min-content);
  /* this is something of a magic number which fits the upper, and lower, edges of
     the .semisquarel and .semisquarer elements lining up as desired: */
  line-height: 2;
  /* I'm using CSS logical properties here; in left-to-right, top-to-bottom languages
     such as English this is equivalent to margin-top */
  margin-block-start: 40px;
  /* logical properties, this is - in English (left-to-right) language - the equivalent
     of margin-left and margin-right; the auto value is used to center the element
     horizontally: */
  margin-inline: auto;
}

/* the :is() pseudo-class function is effectively selecting any element which is either a
   an <img> or <p> within the .divss ancestor, and styling them all; this is shorthand for
   .divss img,
   .divss p {...}
   */
.divss :is(img,p){
  /* we place all matching elements in the center-column of the grid: */
  grid-column: 3;
}

.small {
  /* setting the font-size to the value held in the custom property: */
  font-size: var(--fs-small);
  letter-spacing: 1.5px;
}

.big {
  /* setting the font-size to the value held in the custom property: */
  font-size: var(--fs-large);
}


.semisquarel,
.semisquarer {
  /* setting the aspect ratio to 1, so the image is equally as tall as
     it is wide: */
  aspect-ratio: 1;
  /* setting the size of the inline axis (width, in English, left-to-right)
     to the value held in the custom property: */
  inline-size: var(--imageWidth);
  /* setting the border to the value of the custom property: */
  border: var(--border);
  /* having the element(s) positioned in the third row, and
     spanning all rows until the last: */
  grid-row: 3 / -1;
  /* vertically-centering the element: */
  align-self: center;
}

.semisquarel {
  /* placing the element in the second grid-column: */
  grid-column: 2;
  /* setting the end-border of the inline-axis to
     the value of the custom property: */
  border-inline-end: var(--concealedBorder);
}

.semisquarer {
  grid-column: 4;
  /* setting the start-border of the inline-axis to
     the value of the custom property: */
  border-inline-start: var(--concealedBorder);
}

<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>