.createcalculationcard-1 {
  .card_content {

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    grid-row-gap: 3rem;
    grid-column-gap: 1rem;
    padding: 3rem 1rem;

    .ptype-element {

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;

      color: black;
      text-decoration: none;

      transition: filter 0.2s,
                  transform 0.2s;

      > img {
        width: 7rem;
      }

      > span {
        font-weight: bold;
      }

      &:hover {
      //filter: grayscale(1);
        transform: scale(1.2, 1.2)
      }

    }

  }

  @media only screen and (max-width: 60rem) { /* < 960px */
    .card_content {

      display: grid;
      grid-template-columns: 1fr;

      .ptype-element:nth-child(odd) {
        display: flex;
        flex-direction: row;
      }
      .ptype-element:nth-child(even) {
        display: flex;
        flex-direction: row-reverse;
      }

      .ptype-element > .gap { flex-grow: 0; }
      .ptype-element > span { min-width: 150px; text-align: center; }

    }
  }

}



.createcalculationcard-2 {

  .card_content {
    padding: 1rem;

    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-column-gap: 0.5rem;


    .type-selection {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-column-gap: 1rem;
      grid-column: 1/-1;

      margin-bottom: 1rem;

      position: relative;

      .supertype-name { grid-column: 2; font-weight: bold; }

      > img {
        grid-column: 1;
        width: 7rem;
      }

      #gridMenu {
        align-self: start;
        justify-self: start;

        label {
          display: flex;
          gap: 0.5rem;
        }
      }

      .badge {
        position: absolute;
        top: -40px;
        right: calc(33% - 200px);
        height: auto;
        width: 400px;

        @media only screen and (max-width: 970px) { right: 0; }
        @media only screen and (max-width: 890px) { width: 250px; right: -30px; }
        @media only screen and (max-width: 730px) { display: none; }
      }

    }

    #comment {
      height: 10rem;
    }

  }


}