NSG_PORTAL_V2/components/dynamic-page/page/templates/components/footers/FooterHomeTemplate.vue

<script setup lang="ts">
</script>
<template>
  <div>
    useCmsPageStore 
  </div>
</template>

<style lang="scss" scoped>
.col-span-8 {
  grid-column: span 8 / span 8;

  @media (max-width: 1150px) {
    grid-column: span 7 / span 7;
  }
}
.col-span-12 {
  grid-column: span 12 / span 12 !important;
}
.mbootom-5 {
  margin-bottom: 5px;
}
.mbootom-14 {
  margin-bottom: 14px;
}
.text-neutral-500 {
  color: #737373;
}
.grid-col-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  &.grid-col-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.flex-col {
  display: flex;
  flex-direction: column;

  .text-span {
    font-size: 1rem;
    line-height: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    flex: 1;
    word-break: break-word;
  }

  .text-a {
    font-size: 0.8rem;
    line-height: 1rem;
  }
}

.lg-row {
  @media (min-width: 1300px) {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer1 {
  margin-top: 1.5rem;
  background-color: #ffffff;
  color: black;
  border-top: 1px solid #bfbfbf;

  &-wrap {
    max-width: 90%;
    margin: auto;
    padding-top: 1rem;
    padding-left: 0;
    padding-right: 0;

    .section-right {
      display: grid;
      margin-bottom: 0.5rem;
      gap: 1rem;
      font-size: 0.8rem;
      line-height: 1.25rem;
      font-weight: 400;

      @media (min-width: 950px) {
        grid-template-columns: repeat(12, minmax(0, 1fr));
      }

      .footer-category {
        display: grid;
        gap: 1rem;
        height: 100%;
        /* grid-template-columns: repeat(5, minmax(0, 1fr)); */
        &.grid-col-3 {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        &.grid-col-2 {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .item-nav {
          padding: 10px;
          .text {
            font-size: 0.8rem;
            line-height: 1.25rem;
            color: black;
          }
        }
        .drag-new {
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 6px;
          background: #215486;
          font-size: 40px;
          color: #fff;
          margin: 0 11px;
          max-width: 200px;
          height: 30px;
        }
      }

      &-4 {
        display: grid;
        grid-column: span 4 / span 4;
        grid-auto-rows: max;
        gap: 1rem;
        &.border-top-left-0 {
          border-left: 0;
          border-top: 1px solid #bfbfbf;
          padding-top: 1rem;
        }
        @media (max-width: 1150px) {
          grid-column: span 5 / span 5;
        }

        @media (min-width: 950px) {
          padding-left: 1rem;
          border-left: 1px solid #bfbfbf;
        }

        .text {
          margin-bottom: 0.5rem;
          font-size: 1rem;
          line-height: 1.75rem;
          font-weight: 700;
          text-transform: uppercase;

          &-wrap {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            white-space: nowrap;

            .text-item {
              display: flex;
              gap: 0.5rem;
              align-items: center;
              max-width: 100%;

              .text-child {
                font-size: 0.8rem;
                line-height: 1.25rem;
                flex: 1;
                word-break: break-word;
              }
            }
          }
        }
      }
    }

    .section-bottom {
      display: flex;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
      flex-direction: column;
      gap: 1rem;
      justify-content: space-between;
      align-items: center;

      @media (min-width: 640px) {
        flex-direction: row;
      }

      .ssr {
        display: flex;
        gap: 1rem;
        justify-content: center;
        align-items: center;

        a {
          font-size: 0.8rem;
          color: #737373;
          line-height: 1.25rem;

          @media (min-width: 1024px) {
            font-size: 1rem;
            line-height: 1.5rem;
          }
        }
      }

      &__left {
        display: flex;
        justify-content: center;
        align-items: center;

        @media (min-width: 640px) {
          order: 1;
        }
      }

      &__right {
        display: flex;
        gap: 1rem;
        justify-content: center;
        align-items: center;

        .icon1 {
          color: #737373;
          display: grid;
          place-items: center;
          border-radius: 9999px;
          border: 1px solid #737373;
          transition-duration: 300ms;
          width: 32px;
          height: 32px;
        }

        @media (min-width: 640px) {
          order: 3;
        }
      }
    }
  }
}
</style>