<div class="flex-container">
    <div class="card card1"> </div>
    <div class="card card2"> </div>
    <div class="card card3"> </div>
    <div class="card card4"> </div>
    <div class="card card5"> </div>

    <div class="linebreak"></div>
    
    <div class="card card6"> </div>
    <div class="card card7"> </div>
    <div class="card card8"> </div>
    <div class="card card9"> </div>
  </div>

  $border-color1 : rgb(0, 138, 202);
  $border-color2 : rgb(0, 102, 102);
  $border-color3 : rgb(117, 35, 143);
  $border-color4 : rgb(35, 57, 143);
  $border-color6 : rgb(35, 57, 143);
  $border-color7 : #515fcb;
  $border-color8 : linear-gradient(33deg, #003e8f 0%, #00d5ff 100%);

  $border-size: 4px;

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

  body {
    background: linear-gradient(45deg, #c4ddfd 0%, #ffffff 100%);
    min-height: 100vh;
  }

  .flex-container {
    padding: 50px 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px 100px;
    
    flex-wrap: wrap;

  }

  .linebreak {
    position: relative;
    width: 100%;
    margin: -50px 0px;
  }

  .card {
    position: relative;
    height: 300px;
    width: 200px;
    background: linear-gradient(33deg, #6CACFF 0%, #8DEBFF 100%);
    box-shadow: rgba(149, 157, 165, 0.5) 0px 8px 24px;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: -1;
    }
  }

  .card1 {
    &::before {
      height: 100px;
      width: 100px;
      background-color: $border-color1;
      margin-top: -$border-size;
      margin-left: -$border-size;
    }
    &::after {
      height: 100px;
      width: 100px;
      background-color: $border-color1;
      margin-bottom: -$border-size;
      margin-right: -$border-size;
    }
  }


  .card2 {
    background: linear-gradient(33deg, #41C7AF 0%, #54E38E 100%);
    &::before {
      border-top-right-radius : 10px;
      border-bottom-left-radius : 10px;
      height: 100px;
      width: 100px;
      background-color: $border-color2;
      margin-top: -$border-size;
      margin-left: -$border-size;

    }
    &::after {
      border-top-right-radius : 10px;
      border-bottom-left-radius : 10px;
      height: 100px;
      width: 100px;
      background-color: $border-color2;
      margin-bottom: -$border-size;
      margin-right: -$border-size;
    }
  }


  .card3 {
    background: linear-gradient(33deg, #D279EE 0%, #F8C390 100%);
    &::before {
      height: 100px;
      width: 100px;
      background-color: $border-color3;
      margin-top: -$border-size;
      margin-left: -$border-size;
      transform-origin: top left;
      transform: skewx(3deg) skewY(3deg);

    }
    &::after {
      height: 100px;
      width: 100px;
      background-color: $border-color3;
      margin-bottom: -$border-size;
      margin-right: -$border-size;
      transform-origin: bottom right;
      transform: skewx(3deg) skewY(3deg);
    }
  } 


  .card4 {
    background: linear-gradient(33deg, #5583EE 0%, #41D8DD 100%);
    &::before {
      height: 100%;
      width: 100%;
      background-color: $border-color4;
      margin-top: -$border-size;
      margin-left: -$border-size;
      transform-origin: top left;
      transform: skewx(1deg) skewY(2deg);

    }
    &::after {
      height: 100%;
      width: 100%;
      background-color: $border-color4;
      margin-bottom: -$border-size;
      margin-right: -$border-size;
      transform-origin: bottom right;
      transform: skewx(1deg) skewY(2deg);
    }
  }


  .card5 {
    background: linear-gradient(33deg, #121317 0%, #323B42  100%);
    &::before {
      height: 100px;
      width: 100px;
      border-left: 2px solid black;
      border-top: 2px solid black;
      margin-top: -$border-size;
      margin-left: -$border-size;

    }
    &::after {
      height: 100px;
      width: 100px;
      border-right: 2px solid black;
      border-bottom: 2px solid black;
      margin-bottom: -$border-size;
      margin-right: -$border-size;
    }
  }


  .card6 {
    height: 200px;
    width: 300px;
    border-radius: 10px;
    background: linear-gradient(33deg, #F78FAD 0%, #FDEB82 100%);

    &::before {
      border-radius: 10px;
      height: 100px;
      width: 100px;
      background-color: $border-color6;
      margin-top: -$border-size;
      margin-left: -$border-size;

    }
    &::after {
      border-radius: 10px;
      height: 100px;
      width: 100px;
      background-color: $border-color6;
      margin-bottom: -$border-size;
      margin-right: -$border-size;
    }
  }


  .card7 {
    height: 200px;
    width: 300px;
    border-radius: 10px;
    background: linear-gradient(33deg,   #e5e5e5 0%,  #FAF8F9  100%);

    &::before {
      border-radius: 10px;
      height: 100px;
      width: 100px;
      background: $border-color7;
      margin-top: -$border-size;
      margin-left: -$border-size;
    }


    &::after {
      border-radius: 10px;
      height: 100px;
      width: 100px;
      background: $border-color7;
      margin-bottom: -$border-size;
      margin-right: -$border-size;
    }
  }


  .card8 {
    height: 200px;
    width: 300px;
    border-radius: 10px;
    background: linear-gradient(33deg, #121317 0%, #323B42  100%);

    &::before {
      border-radius: 10px;
      height: 100px;
      width: 100px;
      background: $border-color8;
      margin-top: -$border-size;
      margin-left: -$border-size;
      border: 1px solid black;
    }


    &::after {
      border-radius: 10px;
      height: 100px;
      width: 100px;
      background: $border-color8;
      margin-bottom: -$border-size;
      margin-right: -$border-size;
      border: 1px solid black;
    }
  }


  .card9 {
    height: 200px;
    width: 300px;
    border-radius: 10px;
    background: linear-gradient(33deg, #121317 0%, #323B42  100%);

    &::before {
      border-radius: 10px;
      height: 100px;
      width: 100px;
      margin-top: -$border-size;
      margin-left: -$border-size;
      border: 1px solid black;
    }


    &::after {
      border-radius: 10px;
      height: 100px;
      width: 100px;
      margin-bottom: -$border-size;
      margin-right: -$border-size;
      border: 1px solid black;
    }
  }

//   ¯\_(ツ)_/¯   //