.create-resource-container {
  .subtypes-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    flex-direction:row;
    align-content: baseline;
  }
  .subtype-content {
    width: 100%;
  }

  .subtype-banner {
    border: 1px solid var(--border);
    border-radius: 0;
    display: flex;
    flex-basis: 48%;
    margin: 10px;

    &.disabled {
      cursor: not-allowed !important;
      background-color: var(--disabled-bg);
    }

    &.selected {
      background-color: var(--accent-btn);
    }

    &.top {
      background-image: linear-gradient(
        -90deg,
        var(--body-bg),
        var(--accent-btn)
      );

      h2 {
        margin: 0px;
      }
    }

    .title {
      align-items: center;
      display: flex;
      width: 100%;

      h5 {
        margin: 0;
      }

      .flex-right {
        margin-left: auto;
      }
    }

    .description {
      color: var(--input-label);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    &:not(.top) {
      flex-direction: column;
      justify-content: start;
      &:hover {
        cursor: pointer;
        box-shadow: 0px 0px 1px var(--outline-width) var(--outline);
      }
    }

    .round-image {
      border-radius: 50%;
      height: 60px;
      width: 60px;
      overflow: hidden;
    }

    .banner-abbrv {
      align-items: center;
      background-color: var(--primary);
      color: var(--body-bg);
      display: flex;
      font-size: 2.5em;
      height: 100%;
      justify-content: center;
      width: 100%;
    }
  }
}