<div class="wrapper">
  <section class="section">
    <div class="container">
      
      <div class="hexogon">
        <img src="https://basket-12.wbbasket.ru/vol1893/part189306/189306585/images/big/1.webp" class="hexogon__media">
      </div>
      
      <div class="hexogon hexogon--border">
        <div class="hexogon__inner">
           <img src="https://basket-12.wbbasket.ru/vol1893/part189306/189306585/images/big/1.webp" class="hexogon__media">
        </div>
       
      </div>
      
      <div class="hexogon hexogon--shadow">
        <div class="hexogon__inner"></div>
        <img src="https://basket-12.wbbasket.ru/vol1893/part189306/189306585/images/big/1.webp" class="hexogon__media">
      </div>
      
      <div class="hexogon hexogon--bg" style="background-image: url('https://basket-12.wbbasket.ru/vol1893/part189306/189306585/images/big/1.webp');">
        <div class="hexogon__inner" style="background-image: url('https://basket-12.wbbasket.ru/vol1893/part189306/189306585/images/big/1.webp');">
<!--           <img src="https://placekitten.com/500/600" class="hexogon__media"> -->
        </div>
        
      </div>
      
      <div class="hexogon hexogon--bg">
        <div class="hexogon__inner"></div>
        <img src="https://basket-12.wbbasket.ru/vol1893/part189306/189306585/images/big/1.webp" class="hexogon__media">
      </div>
      
      
      <div class="hexogon hexogon--masking">
        <div class="hexogon__inner"></div>
        <img src="https://basket-12.wbbasket.ru/vol1893/part189306/189306585/images/big/1.webp" class="hexogon__media">
      </div>
      
      
      <div class="hexogon hexogon--light">
        <div class="hexogon__inner"></div>
        <img src="https://basket-12.wbbasket.ru/vol1893/part189306/189306585/images/big/1.webp" class="hexogon__media">
      </div>
    </div>
  </section>
</div>
<footer class="footer">
  <div class="container"></div>
</footer>

/*mixins*/
@function strip-unit($number) {
  @if type-of($number) == "number" and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

@function calcFluidFontSize($f-min, $f-max, $w-min, $w-max, $units: px) {
  $f-min: strip-unit($f-min);
  $f-max: strip-unit($f-max);
  $w-min: strip-unit($w-min);
  $w-max: strip-unit($w-max);

  $k: ($f-max - $f-min)/ ($w-max - $w-min);
  $b: $f-min - $k * $w-min;

  $b: $b + $units;

  @return calc(#{$k} * 100vw + #{$b});
}

@mixin fFS($f-min, $f-max, $w-min, $w-max, $fallback: false) {
  font-size: $f-min;

  @media (min-width: $w-min) {
    @if ($fallback) {
      font-size: $fallback;
    }

    font-size: calcFluidFontSize($f-min, $f-max, $w-min, $w-max, px);
  }

  @media (min-width: $w-max) {
    font-size: $f-max;
  }
}

@mixin bp($point) {
  @media (max-width: $point) {
    @content;
  }
}

/*variables*/
:root {
  --container: 980px;
  --fz: 16px;
  --ff: Arial, sans-serif;
  --text: #222;
  --accent: orange;
}

/*config styles*/
html {
  font-family: var(--ff);
  color: var(--text);
  font-size: var(--fz);
  // @include fFS(16px, 18px, 320px, 1900px, 20px);
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  position: relative;
  min-width: 320px;
  min-height: 100vh;
  flex-grow: 1;
  overflow: hidden;
  background-color: papayawhip;
}

.footer {
  flex-grow: 0;
}

a {
  display: inline-block;
  vertical-align: middle;
}

img {
  display: inline-block;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 10px;
}

/*progect style*/

.hexogon {
  display: grid;
  grid-template-areas: "stac";
  position: relative;
  width: min(100%, 20em);
  margin-bottom: 2em;
  clip-path: polygon(50% 0, 100% 20%, 100% 80%, 50% 100%, 0 80%, 0 20%);
  &--border {
    padding: 1em;
    background: rgba(#111, 0.55);
    .hexogon__media {
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  &--shadow {
    .hexogon__inner {
      &:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: calc(100% - 2em);
        width: calc(100% - 2em);
        background-color: rgba(0, 0, 0, 0.25);
        clip-path: inherit;
      }
    }
  }
  &--bg {
    background-color: rgba(#111, 0.55);
    background-size: cover;
    background-position: center center;
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      clip-path: inherit;
    }
    .hexogon__inner {
      height: calc(100% - 2em);
      width: calc(100% - 2em);
      margin: auto;
      background-size: calc(100% + 2em) calc(100% + 2em);
      background-position: center center;
    }
  }
  &--masking {
    clip-path: none;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 355 420'%3E%3Cpath d='m172.34 0 172.338 99.5v199L172.34 398 0 298.5v-199Z' /%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: 50% 50%;
    .hexogon__inner {
      --p: 4em;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 355 420' style='fill: none;stroke: currentColor;stroke-width: var(--p, 2em);'%3E%3Cpath d='m172.34 0 172.338 99.5v199L172.34 398 0 298.5v-199Z' /%3E%3C/svg%3E");
      background-color: rgba(0, 0, 0, 0.25);
    }
  }
  &--light {
      --border: 1em;
  --border-color: rgba(0, 0, 0, 0.5);
    &:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
      // clip-path: polygon(50% 0, 7% 26%, 7% 74%, 50% 100%, 93% 74%, 93% 26%, 83% 32%, 83% 69%, 50% 89%, 17% 69%, 17% 32%, 50% 12%, 83% 32%, 93% 26%);
  clip-path: polygon(
    50% 0, 100% 20%, 100% 80%, 50% 100%, 0 80%, 0 20%, 50% 0,
    
    50% var(--border),//50%0
    var(--border) calc(20% + var(--border)/1.78), //0 20%
    var(--border) calc(80% - var(--border)/1.78), //0 80%
    50% calc(100% - var(--border)), //50% 100%
    calc(100% - var(--border)) calc(80% - var(--border)/1.78), //100% 80%
    calc(100% - var(--border)) calc(20% + var(--border)/1.78), //100% 20%
    50% var(--border),//50%0

    //(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
    // calc(20% + var(--border) / 1.78) var(--border),//20% 0
    // var(--border) 50%,//0 50%
    // calc(20% + var(--border) / 1.78) calc(100% - var(--border)),//20 100
    // calc(80% - var(--border) / 1.78) calc(100% - var(--border)),// 80 100
    // calc(100% - var(--border)) 50%, //100 50
    // calc(80% - var(--border) / 1.78) var(--border), //80 0
    // calc(20% + var(--border) / 1.78) var(--border) //20 0
  );
      background-color: var(--border-color);
      z-index: 1;
    }
  }
}
.hexogon__inner {
  grid-area: stac;
  position: relative;
  height: 100%;
  width: 100%;
  aspect-ratio: 1/1.15;
  clip-path: inherit;
  z-index: 2;
}

.hexogon__media {
  grid-area: stac;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}