._justFlipIt_panel .back, ._justFlipIt_panel .backY {
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
}

._justFlipIt_panel .back, ._justFlipIt_panel .backY .font-c.size-md h3 {
  font-size: 16px;
}

.font-c.size-md h3 span {
  font-size: 15px;
  font-family: var(--default-font);
  color: var(--default-color);
  font-weight: 400;
}

._justFlipIt_panel{
height: 250px!important;
}

    .brace {
      width: auto;
      min-width: 35px;
      padding-bottom: 20px;
      font-size: 2em;
      line-height: 2em;
      position: relative;
      text-align: center;
      vertical-align: middle;
      margin: 0 15px 15px;
      border: none;
      background-color: transparent;
      background-image: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0) 14.5px, #fff 15.5px, #fff 19.5px, rgba(255, 255, 255, 0) 20.5px), radial-gradient(circle at 35px 0, rgba(255, 255, 255, 0) 14.5px, #fff 15.5px, #fff 19.5px, rgba(255, 255, 255, 0) 20.5px);
      background-size: 35px 20px;
      background-position: center bottom;
      background-repeat: no-repeat;
      text-transform: lowercase;
      font-style: italic;
      color: #fff;
      -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
      filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
    }

    .brace::before {
      width: 50%;
      border-top: 5px solid #fff;
      border-left: 1px solid transparent;
      border-top-left-radius: 20% 30px;
      height: 100%;
      content: '';
      position: absolute;
      top: 100%;
      left: -15px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin-top: -5px;
    }

    .brace::after {
      width: 50%;
      border-top: 5px solid #fff;
      border-right: 1px solid transparent;
      border-top-right-radius: 20% 30px;
      height: 100%;
      content: '';
      position: absolute;
      top: 100%;
      right: -15px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin-top: -5px;
    }


    .btn-modern {
      background: rgba(255, 255, 255, 0.15);
      color: dimgrey;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 1.3rem;
      font-weight: 300;
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }


    .btn-modern:hover {
      background: rgba(255, 255, 255, 0.3);
      color: #0D0D0D;
    }

    .flip-list-w.list {
      flex-flow: column;
      grid-template-columns: 1fr 1fr 1fr;
      justify-content: flex-start;
      align-items: stretch;
      width: 40%;
      max-width: 30rem;
      display: flex;
    }

    .flip-list-w {
      grid-column-gap: 1rem;
      grid-row-gap: 1rem;
      grid-template-rows: auto auto;
      grid-template-columns: 1fr 1fr 1fr;
      grid-auto-columns: 1fr;
      width: 100%;
      margin-bottom: 0;
      padding-left: 0;
      display: grid;
    }

    .font-c.size-md {
      font-size: 22px;
      line-height: 1em;
	  
    }
	
	.font-c.size-md span i {
      font-size: 64px;
	  
    }

    .font-c {
      letter-spacing: -.025em;
      margin-top: 0;
      margin-bottom: 0;
      font-weight: 600;
    }

    .flex-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      color: black;
    }

    .comp {
      max-width: var(--max-w);
      grid-column-gap: 1.5rem;
      grid-row-gap: 1.5rem;
      flex-flow: column;
      flex: none;
      justify-content: center;
      align-items: center;
      width: 94%;
      min-width: 20vw;
      display: flex;
      position: relative;
    }

    .comp ul li {
    }

    .flip-list-w {
      grid-column-gap: 1rem;
      grid-row-gap: 1rem;
      grid-template-rows: auto auto;
      grid-template-columns: 1fr 1fr 1fr;
      grid-auto-columns: 1fr;
      width: 100%;
      margin-bottom: 0;
      padding-left: 0;
      display: grid;
    }

    .w-list-unstyled {
      list-style: none;
    }

    .flip-item {
      grid-column-gap: .6rem;
      grid-row-gap: .6rem;
      aspect-ratio: 389/193;
      flex-flow: column;
      justify-content: space-between;
      align-items: center;
      padding: 4rem 1.5rem;
      display: flex;
      position: relative;
      overflow: clip;
	  text-align:center;
	  width:100%;
    }

    .item-num {
      padding: .5rem;
      font-size: 64px;
      line-height: 1em;
      border-radius: 5px;
    }

    .font-c.size-md._w-ch {
      max-width: 100%;
    }

    .abs-img {
      justify-content: center;
      align-items: center;
      height: 88%;
      display: flex;
      position: absolute;
      inset: auto 0% auto auto;
    }

    /*------Palette----------------*/
    .color-orange {
      background-color: #FB8500;
    }

    .color-darkorange {
      background-color: #E76F51;
    }

    .color-darkyellow {
      background: #FFB703;
      color: #222;
    }

    .color-red {
      background-color: #EF476F;
      color: #fff;
    }

    .color-coolgreen {
      background-color: #7CB518
    }

    .color-mint {
      background-color: #219EBC;
    }

    .color-darkblue {
      background: #023047;
      color: #fff
    }

    .color-lightblue {
      background-color: #8ECAE6;
      color: #fff;
    }

    .color-lila {
      background: #ca9dfe;
      color: #fff;
    }

    /*----------------------*/
    .color-light {
      background: lightpink;
      color: black;
    }

    .color-green {
      background-color: var(--surface-color);
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.1);
      border-radius: 18px;
    }

    .color-deepgreen {
      background: #5C8001;
    }

    .color-purple {
      background: #9b59b6;
      color: #fff;
    }

    .color-lightgreen {
      background: #7ae66a;
      color: #fff;
    }


    .color-blue {
      background: #3A86FF;
      color: #fff;
    }

    /* cards */
    .card-elm {
      border-radius: 10px;
    }


    .card-bg-01 {
      background-image: url('img/card-bg-01.png');
      background-size: cover;
      background-position: bottom;
      width: 100%;
      height: 100%;
      color: aquamarine;
    }

    .card-bg-02-top {
      background-image: url('img/card-bg-02.png');
      background-size: cover;
      background-position: top;
      width: 100%;
      height: 100%;
      color: aquamarine;
    }

    .card-bg-02-middle {
      background-image: url('img/card-bg-02.png');
      background-size: cover;
      background-position: center;
      width: 100%;
      height: 100%;
      color: aquamarine;
    }

    .card-bg-02-bottom {
      background-image: url('img/card-bg-02.png');
      background-size: cover;
      background-position: bottom;
      width: 100%;
      height: 100%;
      color: #EF476F;
    }

    .card-bg-02 {
      background-image: url('img/card-bg-02.png');
      background-size: cover;
      background-position: center;
      width: 100%;
      height: 100%;
      color: darkblue;
      font-weight: 900;
    }

    .card-bg-03 {
      background-image: url('img/card-bg-03.png');
      background-size: cover;
      background-position: center;
      width: 100%;
      height: 100%;
      color: aquamarine;
    }

    .card-bg-04 {
      background-image: url('img/card-bg-04.png');
      background-size: cover;
      background-position: center;
      width: 100%;
      height: 100%;
      color: aquamarine;
    }

    .card-bg-05 {
      background-image: url('img/card-bg-05.png');
      background-size: cover;
      background-position: center;
      width: 100%;
      height: 100%;
      color: aquamarine;
    }

    .card-bg-06 {
      background-image: url('img/card-bg-06.png');
      background-size: cover;
      background-position: center;
      width: 100%;
      height: 100%;
      color: aquamarine;
    }

    .card-bg-07 {
      background-image: url('img/card-bg-07.png');
      background-size: cover;
      background-position: center;
      width: 100%;
      height: 100%;
      color: aquamarine;
    }

    /* Responsive Styles */
    @media (max-width: 900px) {
      header {
        width: 100%;
        padding: 0 1rem;
      }

      .flip-list-w,
      .flip-list-w.list {
        grid-template-columns: 1fr 1fr;
        max-width: 100%;
        width: 100%;
      }
    }

    @media (max-width: 600px) {
      .font-c.size-md {
        font-size: 1.5rem;
      }

      .flex-wrapper {
        flex-direction: column;
        gap: 0.5rem;
      }

      .comp {
        width: 100%;
        min-width: unset;
        padding: 0;
      }

      .flip-list-w,
      .flip-list-w.list {
        grid-template-columns: 1fr;
        max-width: 100%;
        width: 100%;
      }

      .flip-item {
        padding: 0.75rem;
      }

      section {
        padding: 0 0.5rem;
      }
    }

    .github-corner .octo-arm {
      animation: octocat-wave 560ms ease-in-out infinite;
      transform-origin: 130px 106px;
    }

    @keyframes octocat-wave {

      0%,
      100% {
        transform: rotate(0deg);
      }

      20%,
      60% {
        transform: rotate(-25deg);
      }

      40%,
      80% {
        transform: rotate(10deg);
      }
    }

    @media (max-width: 500px) {
      .github-corner .octo-arm {
        animation: none;
      }
    }