.content
  .ticket.shadow
    .ticket__part
      h2.title Билет №35122

    .ticket__part.block-with-holes-wrap
      .block-with-holes

    .ticket__part
      .price_title Цена:
      .ticket__price 400 рублей

    .ticket__part.block-with-holes2-wrap
      .block-with-holes2

    .ticket__part
      .ticket__price full price: $412

body {
  font-family: sans-serif;
  background: linear-gradient(45deg, crimson, orangered);
  height: 100vh;
  min-height: 300px;
  padding: 0;
  margin: 0;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 1px dashed;
  height: 100vh;
  min-height: 300px;
}

.shadow {
  position: relative;

  &:hover {
    &::before {
      transform: scale(1.05);
    }
  }

  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(black, 0.3);
    filter: blur(15px);
    z-index: -1;
    transition: all 0.2s ease-in-out;
  }
}

$ticket-color: white;
.ticket {
  width: 240px;
  background-color: transparent;
  position: relative;

  &__part {
    background-color: $ticket-color;
    overflow: auto;
    padding: 1rem 2rem;

    .title {
      text-align: center;
    }
  }
}

.block-with-holes-wrap {
  overflow: hidden;
  padding: 0;
  background-color: transparent;
}

$block-with-holes-height: 30px;
$border-width: $block-with-holes-height/2;

.block-with-holes {
  position: relative;
  margin: 0 $block-with-holes-height/2;
  display: flex;
  background-color: white;
  height: $block-with-holes-height;
  align-items: center;

  &::before,
  &::after {
    content: "";
    border: $border-width solid white;
    width: $block-with-holes-height;
    height: $block-with-holes-height;
    border-radius: $block-with-holes-height;
    position: absolute;
    box-sizing: content-box;
  }

  &::before {
    left: -($block-with-holes-height + $border-width);
  }

  &::after {
    right: -($block-with-holes-height + $border-width);
  }
}

.block-with-holes2-wrap {
  overflow: hidden;
  padding: 0;
  background-color: transparent;
}

.block-with-holes2 {
  height: $block-with-holes-height;
  padding: 0 $block-with-holes-height/2;
  display: flex;
  flex-direction: row;
  align-items: center;

  background: radial-gradient(
      circle at left center,
      transparent $block-with-holes-height/2-1,
      white $block-with-holes-height/2,
      white 55%,
      transparent 55%
    ),
    radial-gradient(
      circle at right center,
      transparent $block-with-holes-height/2-1,
      white $block-with-holes-height/2,
      white 55%,
      transparent 55%
    );

  // блок с точками
  &::before {
    content: "";
    height: 1px;
    display: block;
    flex-grow: 1;
    border-bottom: 2px dashed darkgray;
    margin-left: 1em;
    margin-right: 1em;
  }
}