officialblock 1.0.7 → 1.0.9

package/src/components/Profile/index.vue

@@ -0,0 +1,999 @@
+<template>
+  <div class="lightbox__content">
+    <div class="lightbox__content__cross i i-cross-modal" @click="handleClose"></div> 
+    <div class="lightbox__content__prev i i-arrow-prev" @click="handleClose"></div> 
+    <div class="lightbox__content__head">
+      <div class="lightbox__content__head__image">
+        <img :src="data?.imgSrc" :alt="data?.alt">
+      </div> 
+      <div class="lightbox__content__head__info">
+        <h2 class="lightbox__content__head__info__title">{{ data?.title }}</h2>
+        <h6 class="lightbox__content__head__info__subtitle">{{ data?.subTitle }}</h6>
+        <div class="lightbox__content__head__info__label">{{ data?.label }}</div>
+        <div class="lightbox__content__head__info__btn">
+          <BtnList v-model="data.buttonList"></BtnList>
+        </div>
+      </div>
+    </div>
+    <div class="lightbox__content__main" style="--head-height: 297px;">
+      <div class="scroll-bar">
+        <div data-simplebar-auto-hide="false" class="simple-bar" data-simplebar="init">
+          <div class="simplebar-wrapper" style="margin: 0px -24px 0px 0px;">
+            <div class="simplebar-height-auto-observer-wrapper">
+              <div class="simplebar-height-auto-observer"></div>
+            </div>
+            <div class="simplebar-mask">
+              <div class="simplebar-offset" style="right: 0px; bottom: 0px;">
+                <div class="simplebar-content-wrapper" tabindex="0" role="region" aria-label="scrollable content" style="height: auto; overflow: hidden;">
+                  <div class="simplebar-content" style="padding: 0px 24px 0px 0px;">
+                    <div class="lightbox__content__body">
+                      <ul>
+                        <li class="lightbox__content__body__list" v-for="item in data?.paragraphs" :key="item.id">
+                          <div class="lightbox__content__body__title">{{ item.title }}</div> 
+                          <div class="lightbox__content__body__text" v-html="item.content"></div>
+                        </li>
+                      </ul>
+                    </div>
+                    <div class="lightbox__content__footer">
+                      <div class="lightbox__content__footer__logo">
+                        <img :src="data.logo || 'https://ywies-tx.cedim.cn/images/logo/logo-ycyw.png'" alt="school logo">
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="simplebar-placeholder" style="width: auto; height: 222px;"></div>
+          </div>
+          <div class="simplebar-track simplebar-horizontal" style="visibility: hidden;">
+            <div class="simplebar-scrollbar simplebar-visible" style="width: 0px; display: none;"></div>
+          </div>
+          <div class="simplebar-track simplebar-vertical" style="visibility: hidden;">
+            <div class="simplebar-scrollbar simplebar-visible" style="height: 0px; display: none;"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup> 
+import BtnList from '@/components/BtnList/index.vue'
+
+defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+const emit = defineEmits(['close']);
+const handleClose = () => {
+  emit('close')
+}
+</script>
+
+<style lang="scss" scoped>
+.lightbox__content {
+  position: relative;
+  width: 100%;
+  font-size: 0;
+  padding: 0 15px 45px 39px;
+  background: #fff;
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content {
+    padding: 0 17px 33px;
+  }
+}
+
+.lightbox__content__cross {
+  position: absolute;
+  right: 33px;
+  top: 24px;
+  cursor: pointer;
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content__cross {
+    display: none;
+  }
+}
+
+.lightbox__content__prev {
+  position: absolute;
+  left: 8px;
+  top: 8px;
+  cursor: pointer;
+}
+
+@media (min-width: 768px) {
+  .lightbox__content__prev {
+    display: none;
+  }
+}
+
+.lightbox__content__head {
+  display: flex;
+  margin-bottom: 40px;
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content__head {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.lightbox__content__head__image {
+  width: 200px;
+  margin-right: 32px;
+  border-radius: 0 0 12px 12px;
+  overflow: hidden;
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content__head__image {
+    width: 160px;
+    margin-right: 0;
+    margin-bottom: 24px;
+  }
+}
+
+.lightbox__content__head__image img {
+  width: 100%;
+  height: auto;
+}
+
+.lightbox__content__head__info {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content__head__info {
+    align-items: center;
+  }
+}
+
+.lightbox__content__head__info__title {
+  color: #0032a0;
+  margin-bottom: 12px;
+}
+
+.lightbox__content__head__info__subtitle {
+  margin-bottom: 8px;
+}
+
+@media (max-width: 767.98px) and (max-width: 1023.98px) {
+  .lightbox__content__head__info__subtitle {
+    line-height: 1.25;
+    letter-spacing: .04em;
+  }
+}
+
+@media (max-width: 767.98px) and (max-width: 767.98px) {
+  .lightbox__content__head__info__subtitle {
+    font-size: 14px;
+    line-height: 1.285;
+    letter-spacing: .02em;
+  }
+}
+
+.lightbox__content__head__info__label {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.285;
+  letter-spacing: .04em;
+  color: #0048e8;
+}
+
+@media (max-width: 1023.98px) {
+  .lightbox__content__head__info__label {
+    line-height: 1.428;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content__head__info__label {
+    line-height: 1.285;
+  }
+}
+
+.lightbox__content__head__info__btn {
+  margin-top: 24px;
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content__head__info__btn {
+    margin-top: 20px;
+  }
+}
+
+@media (min-width: 768px) {
+  .lightbox__content__main {
+    scrollbar-color: #0032a0 #e4e4e6;
+    scrollbar-width: thin;
+    margin-bottom: 39px;
+  }
+
+  .lightbox__content__main::-webkit-scrollbar-track {
+    border-radius: 8px;
+    background-color: #e4e4e6;
+  }
+
+  .lightbox__content__main::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    border-radius: 8px;
+    background-color: #0032a0;
+  }
+
+  .lightbox__content__main::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    background-color: #0032a0;
+  }
+}
+
+@media (min-width: 768px) {
+  .lightbox__content__main>.scroll-bar .simple-bar {
+    padding-right: 24px;
+    max-height: calc(100vh - 495px);
+    max-height: calc(100vh - 220px - var(--head-height, 275px));
+  }
+}
+
+.lightbox__content__body__list {
+  margin-bottom: 40px;
+  max-width: 100%;
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content__body__list {
+    margin-bottom: 24px;
+  }
+}
+
+.lightbox__content__body__title {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.5;
+  letter-spacing: .01em;
+  color: #0032a0;
+  margin-bottom: 8px;
+}
+
+@media (max-width: 1023.98px) {
+  .lightbox__content__body__title {
+    line-height: 1.25;
+    letter-spacing: .04em;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content__body__title {
+    font-size: 14px;
+    line-height: 1.285;
+    letter-spacing: .02em;
+  }
+}
+
+.lightbox__content__body__text {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.75;
+  color: #1a1c20;
+}
+
+@media (max-width: 1023.98px) {
+  .lightbox__content__body__text {
+    font-size: 14px;
+    line-height: 1.714;
+    letter-spacing: .01em;
+  }
+}
+
+.lightbox__content__body__text * {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.75;
+  color: #1a1c20;
+}
+
+@media (max-width: 1023.98px) {
+  .lightbox__content__body__text * {
+    font-size: 14px;
+    line-height: 1.714;
+    letter-spacing: .01em;
+  }
+}
+
+.lightbox__content__body__text b, .lightbox__content__body__text strong {
+  font-weight: 500;
+  color: #0032a0;
+  color: var(--text-color--primary, #0032a0);
+}
+
+.lightbox__content__body__text h1, .lightbox__content__body__text h1 * {
+  font-size: 40px;
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: .02em;
+}
+
+@media (max-width: 1023.98px) {
+  .lightbox__content__body__text h1, .lightbox__content__body__text h1 * {
+    font-size: 32px;
+    font-weight: 500;
+    line-height: 1.2;
+    letter-spacing: .02em;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content__body__text h1, .lightbox__content__body__text h1 * {
+    font-size: 24px;
+    line-height: 1.09;
+  }
+}
+
+.lightbox__content__body__text h2, .lightbox__content__body__text h2 * {
+  font-size: 36px;
+  line-height: 1.33;
+  font-weight: 500;
+}
+
+@media (max-width: 1023.98px) {
+  .lightbox__content__body__text h2, .lightbox__content__body__text h2 * {
+    font-size: 26px;
+    line-height: 1.2;
+    font-weight: 700;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content__body__text h2, .lightbox__content__body__text h2 * {
+    font-size: 22px;
+    line-height: 1.2;
+    font-weight: 500;
+  }
+}
+
+.lightbox__content__body__text h3, .lightbox__content__body__text h3 * {
+  font-size: 26px;
+  font-weight: 700;
+  line-height: 1.69;
+  letter-spacing: .1em;
+}
+
+@media (max-width: 1023.98px) {
+  .lightbox__content__body__text h3, .lightbox__content__body__text h3 * {
+    font-size: 24px;
+    line-height: 1;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content__body__text h3, .lightbox__content__body__text h3 * {
+    font-size: 20px;
+    line-height: 1.2;
+    letter-spacing: .08em;
+  }
+}
+
+.lightbox__content__body__text h4, .lightbox__content__body__text h4 * {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content__body__text h4, .lightbox__content__body__text h4 * {
+    font-size: 20px;
+    line-height: 1.2;
+    letter-spacing: -.005em;
+  }
+}
+
+.lightbox__content__body__text h5, .lightbox__content__body__text h5 * {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.6;
+  letter-spacing: .1em;
+}
+
+@media (max-width: 1023.98px) {
+  .lightbox__content__body__text h5, .lightbox__content__body__text h5 * {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.125;
+    letter-spacing: .01em;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content__body__text h5, .lightbox__content__body__text h5 * {
+    font-weight: 700;
+    line-height: 1.25;
+    letter-spacing: .06em;
+  }
+}
+
+.lightbox__content__body__text h6, .lightbox__content__body__text h6 * {
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.33;
+}
+
+@media (max-width: 1023.98px) {
+  .lightbox__content__body__text h6, .lightbox__content__body__text h6 * {
+    font-size: 16px;
+    line-height: 1.25;
+    letter-spacing: .01em;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content__body__text h6, .lightbox__content__body__text h6 * {
+    line-height: 1.5;
+  }
+}
+
+.lightbox__content__body__text h1 b, .lightbox__content__body__text h1 strong, .lightbox__content__body__text h2 b, .lightbox__content__body__text h2 strong, .lightbox__content__body__text h3 b, .lightbox__content__body__text h3 strong, .lightbox__content__body__text h4 b, .lightbox__content__body__text h4 strong, .lightbox__content__body__text h5 b, .lightbox__content__body__text h5 strong, .lightbox__content__body__text h6 b, .lightbox__content__body__text h6 strong {
+  color: #0032a0;
+  color: var(--text-color--primary, #0032a0);
+}
+
+.lightbox__content__body__text a {
+  color: #0048e8;
+  text-decoration: none;
+  background-image: linear-gradient(90deg, #0048e8, #0048e8);
+  background-size: 0 1px, 100% 1px;
+  background-position: 0 100%, 100% 100%;
+  background-repeat: no-repeat;
+  transition: background-size .3s;
+  padding-bottom: 2px;
+}
+
+.lightbox__content__body__text a:focus, .lightbox__content__body__text a:hover {
+  background-size: 100% 1px, 0 1px;
+}
+
+.lightbox__content__body__text ol:not(:last-child), .lightbox__content__body__text ul:not(:last-child) {
+  margin-bottom: 16px;
+}
+
+.lightbox__content__body__text ol:not(:first-child), .lightbox__content__body__text ul:not(:first-child) {
+  margin-top: 16px;
+}
+
+.lightbox__content__body__text ol>li, .lightbox__content__body__text ul>li {
+  position: relative;
+  padding-left: 1.6em;
+}
+
+.lightbox__content__body__text ul>li:before {
+  content: "";
+  position: absolute;
+  top: .7em;
+  left: .5em;
+  width: 5px;
+  height: 5px;
+  background: #000;
+  border-radius: 50%;
+}
+
+.lightbox__content__body__text ol {
+  counter-reset: section;
+  list-style-type: none;
+}
+
+.lightbox__content__body__text ol>li {
+  list-style-type: none;
+  position: relative;
+}
+
+.lightbox__content__body__text ol>li:before {
+  counter-increment: section;
+  content: counters(section, ".") ".";
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: none;
+}
+
+.lightbox__content__body__text img {
+  width: 100%;
+}
+
+.lightbox__content__body__text em {
+  font-style: italic;
+}
+
+.lightbox__content__body__text table.scrollable {
+  display: block;
+  overflow-x: auto;
+  white-space: nowrap;
+  scrollbar-color: #0032a0 #e4e4e6;
+  scrollbar-width: thin;
+}
+
+.lightbox__content__body__text table.scrollable::-webkit-scrollbar-track {
+  border-radius: 8px;
+  background-color: #e4e4e6;
+}
+
+.lightbox__content__body__text table.scrollable::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  border-radius: 8px;
+  background-color: #0032a0;
+}
+
+.lightbox__content__body__text table.scrollable::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  background-color: #0032a0;
+}
+
+@media (max-width: 575.98px) {
+  .lightbox__content__body__text table.scrollable-sm {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+    scrollbar-color: #0032a0 #e4e4e6;
+    scrollbar-width: thin;
+  }
+
+  .lightbox__content__body__text table.scrollable-sm::-webkit-scrollbar-track {
+    border-radius: 8px;
+    background-color: #e4e4e6;
+  }
+
+  .lightbox__content__body__text table.scrollable-sm::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    border-radius: 8px;
+    background-color: #0032a0;
+  }
+
+  .lightbox__content__body__text table.scrollable-sm::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    background-color: #0032a0;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content__body__text table.scrollable-md {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+    scrollbar-color: #0032a0 #e4e4e6;
+    scrollbar-width: thin;
+  }
+
+  .lightbox__content__body__text table.scrollable-md::-webkit-scrollbar-track {
+    border-radius: 8px;
+    background-color: #e4e4e6;
+  }
+
+  .lightbox__content__body__text table.scrollable-md::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    border-radius: 8px;
+    background-color: #0032a0;
+  }
+
+  .lightbox__content__body__text table.scrollable-md::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    background-color: #0032a0;
+  }
+}
+
+@media (max-width: 1023.98px) {
+  .lightbox__content__body__text table.scrollable-lg {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+    scrollbar-color: #0032a0 #e4e4e6;
+    scrollbar-width: thin;
+  }
+
+  .lightbox__content__body__text table.scrollable-lg::-webkit-scrollbar-track {
+    border-radius: 8px;
+    background-color: #e4e4e6;
+  }
+
+  .lightbox__content__body__text table.scrollable-lg::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    border-radius: 8px;
+    background-color: #0032a0;
+  }
+
+  .lightbox__content__body__text table.scrollable-lg::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    background-color: #0032a0;
+  }
+}
+
+@media (max-width: 1279.98px) {
+  .lightbox__content__body__text table.scrollable-xl {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+    scrollbar-color: #0032a0 #e4e4e6;
+    scrollbar-width: thin;
+  }
+
+  .lightbox__content__body__text table.scrollable-xl::-webkit-scrollbar-track {
+    border-radius: 8px;
+    background-color: #e4e4e6;
+  }
+
+  .lightbox__content__body__text table.scrollable-xl::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    border-radius: 8px;
+    background-color: #0032a0;
+  }
+
+  .lightbox__content__body__text table.scrollable-xl::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    background-color: #0032a0;
+  }
+}
+
+.lightbox__content__body__text table:not(.table-striped) tr {
+  background-color: #fff;
+}
+
+.lightbox__content__body__text table:not(.table-striped) tr td {
+  padding: 8px 32px 8px 16px;
+  vertical-align: middle;
+  line-height: 1.25;
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content__body__text table:not(.table-striped) tr td {
+    padding: 10px 8px;
+  }
+}
+
+.lightbox__content__body__text table:not(.table-striped) tr td:first-child:not(:only-child) {
+  background-color: #f2f8ff;
+}
+
+.lightbox__content__body__text table:not(.table-striped) tr th {
+  background-color: #0032a0;
+  background-color: var(--text-color--secondary, #0032a0);
+  color: #fff;
+  padding: 8px 32px 8px 16px;
+  vertical-align: middle;
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content__body__text table:not(.table-striped) tr th {
+    height: 34px;
+    padding: 8px 12px;
+  }
+}
+
+.lightbox__content__body__text table:not(.table-striped) tr th *,.lightbox__content__body__text table:not(.table-striped) tr th b,.lightbox__content__body__text table:not(.table-striped) tr th em,.lightbox__content__body__text table:not(.table-striped) tr th p,.lightbox__content__body__text table:not(.table-striped) tr th strong {
+  color: #fff;
+}
+
+.lightbox__content__body__text table:not(.table-striped) tr th p {
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.33;
+}
+
+@media (max-width: 1023.98px) {
+  .lightbox__content__body__text table:not(.table-striped) tr th p {
+    font-size: 16px;
+    line-height: 1.25;
+    letter-spacing: .01em;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content__body__text table:not(.table-striped) tr th p {
+    line-height: 1.5;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.25;
+    letter-spacing: .01em;
+  }
+}
+
+@media (max-width: 767.98px) and (max-width: 1023.98px) {
+  .lightbox__content__body__text table:not(.table-striped) tr th p {
+    font-size: 14px;
+    line-height: 1.285;
+    letter-spacing: .01em;
+  }
+}
+
+.lightbox__content__body__text table.table-striped tr:nth-child(2n) {
+  background-color: #f2f8ff;
+}
+
+.lightbox__content__body__text table.table-striped tr:nth-child(odd) {
+  background-color: #fff;
+}
+
+.lightbox__content__body__text table.table-striped tr:first-child {
+  background-color: #0032a0;
+  background-color: var(--text-color--secondary, #0032a0);
+}
+
+.lightbox__content__body__text table.table-striped th {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.25;
+  letter-spacing: .01em;
+  padding: 8px 36px;
+  color: #fff;
+}
+
+@media (max-width: 1023.98px) {
+  .lightbox__content__body__text table.table-striped th {
+    font-size: 14px;
+    line-height: 1.285;
+    letter-spacing: .01em;
+    padding: 8px 16px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content__body__text table.table-striped th {
+    padding: 8px;
+  }
+}
+
+.lightbox__content__body__text table.table-striped td {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.75;
+  padding: 13.5px 36px;
+  color: #1a1c20;
+}
+
+@media (max-width: 1023.98px) {
+  .lightbox__content__body__text table.table-striped td {
+    font-size: 14px;
+    line-height: 1.714;
+    letter-spacing: .01em;
+    padding: 12px 16px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content__body__text table.table-striped td {
+    padding: 10px 8px;
+  }
+}
+
+.lightbox__content__body__text .column-1 {
+  -moz-column-count: 1;
+  column-count: 1;
+  grid-column-gap: 80px;
+  -moz-column-gap: 80px;
+  column-gap: 80px;
+}
+
+.lightbox__content__body__text .column-1>* {
+  -moz-column-break-inside: avoid;
+  break-inside: avoid-column;
+}
+
+.lightbox__content__body__text .column-2 {
+  -moz-column-count: 2;
+  column-count: 2;
+  grid-column-gap: 80px;
+  -moz-column-gap: 80px;
+  column-gap: 80px;
+}
+
+.lightbox__content__body__text .column-2>* {
+  -moz-column-break-inside: avoid;
+  break-inside: avoid-column;
+}
+
+.lightbox__content__body__text .column-3 {
+  -moz-column-count: 3;
+  column-count: 3;
+  grid-column-gap: 80px;
+  -moz-column-gap: 80px;
+  column-gap: 80px;
+}
+
+.lightbox__content__body__text .column-3>* {
+  -moz-column-break-inside: avoid;
+  break-inside: avoid-column;
+}
+
+.lightbox__content__body__text .column-4 {
+  -moz-column-count: 4;
+  column-count: 4;
+  grid-column-gap: 80px;
+  -moz-column-gap: 80px;
+  column-gap: 80px;
+}
+
+.lightbox__content__body__text .column-4>* {
+  -moz-column-break-inside: avoid;
+  break-inside: avoid-column;
+}
+
+@media (min-width: 768px) {
+  .lightbox__content__body__text .column-tablet-1 {
+    -moz-column-count: 1;
+    column-count: 1;
+    grid-column-gap: 80px;
+    -moz-column-gap: 80px;
+    column-gap: 80px;
+  }
+
+  .lightbox__content__body__text .column-tablet-1>* {
+    -moz-column-break-inside: avoid;
+    break-inside: avoid-column;
+  }
+}
+
+@media (min-width: 768px) {
+  .lightbox__content__body__text .column-tablet-2 {
+    -moz-column-count: 2;
+    column-count: 2;
+    grid-column-gap: 80px;
+    -moz-column-gap: 80px;
+    column-gap: 80px;
+  }
+
+  .lightbox__content__body__text .column-tablet-2>* {
+    -moz-column-break-inside: avoid;
+    break-inside: avoid-column;
+  }
+}
+
+@media (min-width: 768px) {
+  .lightbox__content__body__text .column-tablet-3 {
+    -moz-column-count: 3;
+    column-count: 3;
+    grid-column-gap: 80px;
+    -moz-column-gap: 80px;
+    column-gap: 80px;
+  }
+
+  .lightbox__content__body__text .column-tablet-3>* {
+    -moz-column-break-inside: avoid;
+    break-inside: avoid-column;
+  }
+}
+
+@media (min-width: 768px) {
+  .lightbox__content__body__text .column-tablet-4 {
+    -moz-column-count: 4;
+    column-count: 4;
+    grid-column-gap: 80px;
+    -moz-column-gap: 80px;
+    column-gap: 80px;
+  }
+
+  .lightbox__content__body__text .column-tablet-4>* {
+    -moz-column-break-inside: avoid;
+    break-inside: avoid-column;
+  }
+}
+
+@media (min-width: 1280px) {
+  .lightbox__content__body__text .column-desktop-1 {
+    -moz-column-count: 1;
+    column-count: 1;
+    grid-column-gap: 80px;
+    -moz-column-gap: 80px;
+    column-gap: 80px;
+  }
+
+  .lightbox__content__body__text .column-desktop-1>* {
+    -moz-column-break-inside: avoid;
+    break-inside: avoid-column;
+  }
+}
+
+@media (min-width: 1280px) {
+  .lightbox__content__body__text .column-desktop-2 {
+    -moz-column-count: 2;
+    column-count: 2;
+    grid-column-gap: 80px;
+    -moz-column-gap: 80px;
+    column-gap: 80px;
+  }
+
+  .lightbox__content__body__text .column-desktop-2>* {
+    -moz-column-break-inside: avoid;
+    break-inside: avoid-column;
+  }
+}
+
+@media (min-width: 1280px) {
+  .lightbox__content__body__text .column-desktop-3 {
+    -moz-column-count: 3;
+    column-count: 3;
+    grid-column-gap: 80px;
+    -moz-column-gap: 80px;
+    column-gap: 80px;
+  }
+
+  .lightbox__content__body__text .column-desktop-3>* {
+    -moz-column-break-inside: avoid;
+    break-inside: avoid-column;
+  }
+}
+
+@media (min-width: 1280px) {
+  .lightbox__content__body__text .column-desktop-4 {
+    -moz-column-count: 4;
+    column-count: 4;
+    grid-column-gap: 80px;
+    -moz-column-gap: 80px;
+    column-gap: 80px;
+  }
+
+  .lightbox__content__body__text .column-desktop-4>* {
+    -moz-column-break-inside: avoid;
+    break-inside: avoid-column;
+  }
+}
+
+.lightbox__content__footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 80px;
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content__footer {
+    justify-content: center;
+    margin-top: 60px;
+  }
+}
+
+.lightbox__content__footer__logo {
+  height: 90px;
+}
+
+@media (max-width: 767.98px) {
+  .lightbox__content__footer__logo {
+    height: 55px;
+  }
+}
+
+.lightbox__content__footer__logo img {
+  width: auto;
+  height: 100%;
+  -o-object-fit: contain;
+  object-fit: contain;
+}
+
+.lightbox-profile .lightbox__wrapper .lightbox__content__head__info__btn {
+  margin-top: 24px;
+}
+
+@media (max-width: 767.98px) {
+  .lightbox-profile .lightbox__wrapper .lightbox__content__head__info__btn {
+    margin-top: 20px;
+  }
+}
+
+:deep(.container-content) {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+:deep(.btn-list__row) {
+  justify-content: flex-start !important;
+}
+</style>