:host {
  display: flex;
  flex: 1;
  flex-flow: column nowrap;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #344563;
}

.search-content {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;

  height: 296px;
  padding: 48px;

  h1 {
    position: relative;

    font-size: 1.71429em;
    font-weight: 500;
    font-style: inherit;
    line-height: 1.16667;
    color: rgb(255 255 255);
    letter-spacing: -0.01em;
  }
}

section {
  display: flex;
  flex-flow: column nowrap;

  h2 {
    font-size: 1.14286em;
    font-weight: 600;
    font-style: inherit;
    line-height: 1.25;
    color: var(--theme-hack-color, --sdesk-text-color, #182c4b);
    letter-spacing: -0.006em;

    &.mv-2 {
      margin: 24px 0;
    }
  }
}

.spaces {
  .cards {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;

    .card {
      cursor: pointer;

      position: relative;

      display: flex;
      flex-flow: column nowrap;
      justify-content: center;

      box-sizing: border-box;
      width: 336px;
      height: 144px;
      margin: 16px 20px;
      padding: 24px 32px;

      background-color: var(--color-gray-fff);
      border-radius: 3px;
      box-shadow:
        0 1px 3px rgb(9 30 66 / 25%),
        0 0 1px 1px rgb(9 30 66 / 13%);

      transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

      * {
        pointer-events: none;
      }

      &:hover {
        transform: translate3d(0, -2px, 0);
        box-shadow:
          0 3px 5px rgb(9 30 66 / 25%),
          0 0 3px 1px rgb(9 30 66 / 13%);
      }

      .card-header {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;

        width: 100%;
        max-height: 20px;
        margin-top: 0;
        margin-bottom: 8px;

        font-size: 1.14286em;
        font-weight: 600;
        font-style: inherit;
        line-height: 1.25;
        color: var(--sdesk-link-text-color);
        letter-spacing: -0.006em;

        -webkit-line-clamp: 1;
      }

      .card-content {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;

        width: 100%;
        max-width: 100%;
        max-height: 60px;

        font-size: 14px;
        line-height: 20px;
        color: rgb(23 43 77);

        -webkit-line-clamp: 3;
      }
    }
  }
}

.more-button {
  cursor: pointer;

  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;

  height: 2.28571em;
  margin: 0 auto;
  padding: 0 8px;

  font-size: 1.14286em;
  font-weight: 600;
  font-style: inherit;
  line-height: 2.28571em;
  color: var(--sdesk-link-text-color);
  text-decoration: none;
  text-decoration-line: none;
  text-decoration-thickness: 2px;
  letter-spacing: -0.006em;
  white-space: nowrap;

  background: none;
  border: none;

  transition: text-decoration-line 0.2s ease;

  &:hover {
    text-decoration-line: underline;
  }

  .icon {
    margin-left: 12px;
  }
}

.recent-ticket-types {
  display: flex;
  flex-flow: column nowrap;

  .list {
    display: flex;
    flex-flow: column nowrap;

    .item {
      display: flex;
      flex-flow: row nowrap;
      padding-bottom: 16px;

      .image {
        display: block;
        width: 32px;
        height: 32px;
        margin-right: 16px;
      }

      .content {
        display: flex;
        flex-flow: column nowrap;

        a,
        a:link,
        a:visited {
          color: var(--sdesk-link-text-color);
          text-decoration: none;
          transition: text-decoration 0.2s ease;
        }

        a:hover {
          text-decoration: underline;
        }

        a,
        span {
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;

          -webkit-line-clamp: 1;
        }
      }
    }
  }
}

.home-title-wrapper {
  display: flex;
  flex-direction: column-reverse;
  overflow-wrap: break-word;
}