.panel {
  $side-padding: $spacer-8;
  display: grid;
  grid-template-areas: /* stylelint-disable-line declaration-colon-space-after */
    'title'
    'content';
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  position: relative;
  padding: $spacer-6 0;
  gap: $spacer-5;
  overflow: hidden;
  height: 100%;

  .panel-title {
    grid-area: title;
    display: flex;
    align-items: center;
    gap: $spacer-4;
    color: $secondary-color;
    font-family: $base-font-family;
    padding-left: $side-padding;

    h1 {
      font-weight: 300;
      font-size: $font-size-extra-large;
    }

    .link {
      height: 25px;
      width: 25px;
      font-size: $font-size-little;
      color: $secondary-color;
    }
  }

  .panel-content {
    grid-area: content;
    padding: 0 $side-padding;
    overflow: hidden;
    height: 100%;

    .columns-container {
      margin-bottom: $spacer-4;
      max-height: 100%;

      .column {
        padding: $spacer-1 0;
        max-height: 100%;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}