new-templane/resources/sass/base/_typography.scss

// Typography
body {
	// для прижатого к низу футера
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin:0;
	padding:0;
	font-family: var(--default-font-family), Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: var(--fz-default);
	font-style: normal;
	font-weight: 400;
	line-height: var(--lh-default);
	min-width: 360px;
	color: var(--text-color);
	position: relative;
	scroll-behavior: smooth; // плавный скролл
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility; //сглаживание шрифтов
}

// default typography styles
h1 {
	font-family: var(--heading-font-family);
	font-weight: 600;
	font-size: var(--h1);
	line-height: 106%;
	text-transform: uppercase;
}

h2 {
	font-family: var(--heading-font-family);
	font-weight: 600;
	font-size: var(--h2);
	line-height: 125%;
	text-transform: uppercase;
}

h3 {
	font-family: var(--heading-font-family);
	font-weight: 600;
	font-size: var(--h3);
	line-height: 130%;
}

h4 {
	font-family: var(--heading-font-family);
	font-weight: 600;
	font-size: var(--h4);
	line-height: 133%;
}

h5 {
	font-family: var(--heading-font-family);
	font-weight: 600;
	font-size: var(--m);
	line-height: 135%;
}

h6 {
	font-family: var(--heading-font-family);
	font-weight: 900;
	font-size: var(--m);
	line-height: 140%;
}

h1, h2, h3, h4, h5, h6{
	margin:32px 0 20px 0;
	@include mobile{
		margin:24px 0 12px 0;
	}
}

// text style
.text{
	& > h1:first-child,
	& > h2:first-child,
	& > h3:first-child,
	& > h4:first-child,
	& > h5:first-child,
	& > h6:first-child{
	 margin-top:0;
	}
 p{
	 margin-bottom:24px;
	 @include mobile{
		 margin-bottom:16px;
	 }
	 &:last-child{
		 margin-bottom:0;
	 }
 }
 a{
	 color:var(--color-link-text);
	 text-decoration:underline;
	 text-underline-offset: 3px;
	 text-decoration-thickness: 1px;
	 &:hover{
		 text-decoration:none;
		 color:var(--color-theme-red);
	 }
 }
 // list style ol ul
 ol, ul{
	 margin:24px 0;
	 list-style-position: inside;
	 @include mobile{
		 margin:12px 0;
		 padding-left:8px;
	 }
	 li{
		 margin:12px 0;
		 margin-left:32px;
		 @include mobile{
			 margin-left:16px;
		 }
	 }
 }

 // list style ul
 ul{
	 list-style:disc;
 }

 // list style ol
 ol{
	 list-style:decimal;
 }

 img{
	 max-width:100%;
	 height:auto;
	 border-radius: 12px;
 }


 // блок врапер для скролла таблицы
 .table-wrapper-scroll{
	 margin:30px 0;
	 background: var(--table-bg-color);
	 border: 1px solid var(--content-border-color);
	 border-radius: 9px;
	 overflow: hidden;
	 @include mobile-sm{
		 overflow-x: auto;
		 margin:20px 0;
		 &::-webkit-scrollbar {
			 height: 6px;
		 }
		 &::-webkit-scrollbar-track {
			 background: var(--table-bg-color);
			 border-radius: 9px;
		 }
		 &::-webkit-scrollbar-thumb {
			 background: var(--content-border-color);
			 border-radius: 9px;
			 &:hover {
				 background: var(--accent-color);
			 }
		 }
	 }
	//  &.has-caption{
	// 	 padding-top:25px;
	//  }
 }

 // дополнительный блок врапер для стилизации таблицы (border-radius gradient)
 .table-wrapper{
	 //padding:1px;
	 border-radius:9px;
	 &.large-table{
			@include mobile-sm{
				width:640px;
			}
	 }
 }

 // стили таблицы по умолчанию
table{
	 margin:0;
	 position:relative;
	 width:100%;
	 //table-layout: fixed;
	 table-layout: auto;
	 border-collapse: collapse;
	 border-radius:9px;
	 overflow:hidden;
	 background: var(--table-bg-color);
	 thead{
		 th, td{
			 padding:12px;
			 text-align: center;
			 font-size: 16px;
			 font-style: normal;
			 font-weight: 600;
			 line-height:1.2em;
			 vertical-align: middle;
			 background: var(--table-header-color);
			 border: 1px solid var(--content-border-color);
			 @include mobile-sm{
				 vertical-align: middle;
				 font-size:13px;
				 padding:8px;
			 }
		 }
	 }
  tr:first-child{
    th{
			 padding:12px;
			 text-align: center;
			 font-size: 16px;
			 font-style: normal;
			 font-weight: 600;
			 line-height:1.2em;
			 vertical-align: middle;
			 background: var(--table-header-color);
			 border: 1px solid var(--content-border-color);
			 @include mobile-sm{
				 vertical-align: middle;
				 font-size:13px;
				 padding:8px;
			 }
		}
    &:has(th){
            overflow:hidden;
            height: auto !important;
        }
     }
	 tbody{
		 tr{
			 border: 1px solid var(--content-border-color);
			 &:nth-child(even){
				 background: rgba(var(--table-header-color-rgb, 42, 42, 42), 0.3);
			 }
		 }
		 td{
			 padding:12px;
			 vertical-align: middle;
			 word-wrap: break-word;
			 border: 1px solid var(--content-border-color);
			 @include tablet{
				 font-size: 14px;
				 font-style: normal;
				 font-weight: 400;
				 line-height: 16px;
			 }
			 @include mobile-sm{
				 font-size:13px;
				 padding:8px;
			 }
		 }
	 }
 }

}