430 lines
8.5 KiB
SCSS
Executable File
430 lines
8.5 KiB
SCSS
Executable File
/*----------------------------------------*/
|
|
/* SPACE CSS START
|
|
/*----------------------------------------*/
|
|
|
|
.my-80 {
|
|
margin: clamp(48px, 4.167vw, 160px) 0;
|
|
@include media-query(575px) {
|
|
margin: 40px 0;
|
|
}
|
|
}
|
|
.mt-80 {
|
|
margin-top: clamp(48px, 4.167vw, 160px);
|
|
@include media-query(575px) {
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
.mb-80 {
|
|
margin-bottom: clamp(48px, 4.167vw, 160px);
|
|
@include media-query(575px) {
|
|
margin-bottom: 40px;
|
|
}
|
|
}
|
|
.mb-64 {
|
|
margin-bottom: clamp(32px, 3.33vw, 128px);
|
|
@include media-query(767px) {
|
|
margin-bottom: 26px;
|
|
}
|
|
}
|
|
.mt-64 {
|
|
margin-top: clamp(32px, 3.33vw, 128px);
|
|
@include media-query(767px) {
|
|
margin-top: 26px;
|
|
}
|
|
}
|
|
.mt-48 {
|
|
margin-top: clamp(24px, 2.5vw, 96px);
|
|
@include media-query(767px) {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
.mb-48 {
|
|
margin-bottom: clamp(24px, 2.5vw, 96px);
|
|
@include media-query(767px) {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
.mt-32 {
|
|
margin-top: 32px;
|
|
@include media-query(1599px) {
|
|
margin-top: 29px;
|
|
}
|
|
@include media-query(1399px) {
|
|
margin-top: 27px;
|
|
}
|
|
@include media-query(1199px) {
|
|
margin-top: 25px;
|
|
}
|
|
@include media-query(991px) {
|
|
margin-top: 22px;
|
|
}
|
|
@include media-query(767px) {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
.mb-32 {
|
|
margin-bottom: 32px;
|
|
@include media-query(1599px) {
|
|
margin-bottom: 29px;
|
|
}
|
|
@include media-query(1399px) {
|
|
margin-bottom: 27px;
|
|
}
|
|
@include media-query(1199px) {
|
|
margin-bottom: 25px;
|
|
}
|
|
@include media-query(991px) {
|
|
margin-bottom: 22px;
|
|
}
|
|
@include media-query(767px) {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
.mt-24 {
|
|
margin-top: 24px;
|
|
@include media-query(1199px) {
|
|
margin-top: 22px;
|
|
}
|
|
@include media-query(991px) {
|
|
margin-top: 22px;
|
|
}
|
|
@include media-query(767px) {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
.my-24 {
|
|
margin-top: 24px;
|
|
margin-bottom: 24px;
|
|
@include media-query(1199px) {
|
|
margin-top: 22px;
|
|
margin-bottom: 24px;
|
|
}
|
|
@include media-query(991px) {
|
|
margin-top: 22px;
|
|
margin-bottom: 24px;
|
|
}
|
|
@include media-query(767px) {
|
|
margin-top: 20px;
|
|
margin-bottom: 22px;
|
|
}
|
|
}
|
|
.mb-24 {
|
|
margin-bottom: 24px;
|
|
@include media-query(1199px) {
|
|
margin-bottom: 22px;
|
|
}
|
|
@include media-query(991px) {
|
|
margin-bottom: 22px;
|
|
}
|
|
@include media-query(767px) {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
.mt-16 {
|
|
margin-top: 16px;
|
|
@include media-query(1199px) {
|
|
margin-top: 15px;
|
|
}
|
|
@include media-query(991px) {
|
|
margin-top: 14px;
|
|
}
|
|
@include media-query(767px) {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
.mb-16 {
|
|
margin-bottom: 16px;
|
|
@include media-query(1199px) {
|
|
margin-bottom: 15px;
|
|
}
|
|
@include media-query(991px) {
|
|
margin-bottom: 14px;
|
|
}
|
|
@include media-query(767px) {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
.mb-12 {
|
|
margin-bottom: 12px;
|
|
@include media-query(1199px) {
|
|
margin-bottom: 11px;
|
|
}
|
|
@include media-query(991px) {
|
|
margin-bottom: 10px;
|
|
}
|
|
@include media-query(767px) {
|
|
margin-bottom: 8px;
|
|
}
|
|
}
|
|
.mb-8 {
|
|
margin-bottom: 8px;
|
|
@include media-query(767px) {
|
|
margin-bottom: 4px;
|
|
}
|
|
}
|
|
|
|
.mb-4p {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
// ----Padding ----
|
|
.py-160 {
|
|
padding: clamp(96px, 8.32vw, 320px) 0;
|
|
@include media-query(575px) {
|
|
padding: 80px 0;
|
|
}
|
|
}
|
|
.pt-160 {
|
|
padding-top: clamp(96px, 8.32vw, 320px);
|
|
@include media-query(575px) {
|
|
padding-top: 80px;
|
|
}
|
|
}
|
|
.pb-160 {
|
|
padding-bottom: clamp(96px, 8.32vw, 320px);
|
|
@include media-query(575px) {
|
|
padding-bottom: 80px;
|
|
}
|
|
}
|
|
.py-80 {
|
|
padding: clamp(48px, 4.167vw, 160px) 0;
|
|
@include media-query(575px) {
|
|
padding: 40px 0;
|
|
}
|
|
}
|
|
.pt-80 {
|
|
padding-top: clamp(48px, 4.167vw, 160px);
|
|
@include media-query(575px) {
|
|
padding-top: 40px;
|
|
}
|
|
}
|
|
.pb-80 {
|
|
padding-bottom: clamp(48px, 4.167vw, 160px);
|
|
@include media-query(575px) {
|
|
padding-bottom: 40px;
|
|
}
|
|
}
|
|
.py-64 {
|
|
padding: clamp(32px, 3.33vw, 128px) 0;
|
|
@include media-query(767px) {
|
|
padding: 26px 0;
|
|
}
|
|
}
|
|
.pt-64 {
|
|
padding-top: clamp(32px, 3.33vw, 128px);
|
|
@include media-query(767px) {
|
|
padding-top: 26px;
|
|
}
|
|
}
|
|
.pb-64 {
|
|
padding-bottom: clamp(32px, 3.33vw, 128px);
|
|
@include media-query(767px) {
|
|
padding-bottom: 26px;
|
|
}
|
|
}
|
|
|
|
.py-48 {
|
|
padding: clamp(24px, 2.5vw, 96px) 0;
|
|
@include media-query(767px) {
|
|
padding: 20px 0;
|
|
}
|
|
}
|
|
.pb-48 {
|
|
padding-bottom: clamp(24px, 2.5vw, 96px);
|
|
@include media-query(767px) {
|
|
padding-bottom: 20px;
|
|
}
|
|
}
|
|
.pt-48 {
|
|
padding-top: clamp(24px, 2.5vw, 96px);
|
|
@include media-query(767px) {
|
|
padding-top: 20px;
|
|
}
|
|
}
|
|
|
|
.py-40 {
|
|
padding: clamp(24px, 2.083vw, 80px) 0;
|
|
@include media-query(575px) {
|
|
padding: 20px 0;
|
|
}
|
|
}
|
|
.pt-40 {
|
|
padding-top: clamp(24px, 2.083vw, 80px);
|
|
@include media-query(575px) {
|
|
padding-top: 20px;
|
|
}
|
|
}
|
|
.pb-40 {
|
|
padding-bottom: clamp(24px, 2.083vw, 80px);
|
|
@include media-query(575px) {
|
|
padding-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
.py-32 {
|
|
padding: 32px 0;
|
|
@include media-query(1599px) {
|
|
padding: 29px 0;
|
|
}
|
|
@include media-query(1399px) {
|
|
padding: 27px 0;
|
|
}
|
|
@include media-query(1199px) {
|
|
padding: 25px 0;
|
|
}
|
|
@include media-query(991px) {
|
|
padding: 22px 0;
|
|
}
|
|
@include media-query(767px) {
|
|
padding: 20px 0;
|
|
}
|
|
}
|
|
.p-32 {
|
|
padding: 32px;
|
|
@include media-query(1599px) {
|
|
padding: 29px;
|
|
}
|
|
@include media-query(1399px) {
|
|
padding: 27px;
|
|
}
|
|
@include media-query(1199px) {
|
|
padding: 25px;
|
|
}
|
|
@include media-query(991px) {
|
|
padding: 22px;
|
|
}
|
|
@include media-query(767px) {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
|
|
.py-24 {
|
|
padding: 24px 0;
|
|
@include media-query(1199px) {
|
|
padding: 22px 0;
|
|
}
|
|
@include media-query(991px) {
|
|
padding: 22px 0;
|
|
}
|
|
@include media-query(767px) {
|
|
padding: 20px 0;
|
|
}
|
|
}
|
|
.pl-24 {
|
|
padding-left: 24px;
|
|
@include media-query(1199px) {
|
|
padding-left: 22px;
|
|
}
|
|
@include media-query(991px) {
|
|
padding-left: 22px;
|
|
}
|
|
@include media-query(767px) {
|
|
padding-left: 20px;
|
|
}
|
|
}
|
|
.pb-24 {
|
|
padding-bottom: 24px;
|
|
@include media-query(1199px) {
|
|
padding-bottom: 22px;
|
|
}
|
|
@include media-query(991px) {
|
|
padding-bottom: 22px;
|
|
}
|
|
@include media-query(767px) {
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
}
|
|
.pb-32 {
|
|
padding-bottom: 32px;
|
|
@include media-query(1199px) {
|
|
padding-bottom: 22px;
|
|
}
|
|
@include media-query(991px) {
|
|
padding-bottom: 22px;
|
|
}
|
|
@include media-query(767px) {
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
}
|
|
.p-24 {
|
|
padding: 24px;
|
|
@include media-query(1199px) {
|
|
padding: 22px;
|
|
}
|
|
@include media-query(991px) {
|
|
padding: 22px;
|
|
}
|
|
@include media-query(767px) {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
|
|
.p-16 {
|
|
padding: 16px;
|
|
@include media-query(1199px) {
|
|
padding: 15px;
|
|
}
|
|
@include media-query(991px) {
|
|
padding: 14px;
|
|
}
|
|
@include media-query(767px) {
|
|
padding: 10px;
|
|
}
|
|
}
|
|
.p-12 {
|
|
padding: 12px;
|
|
@include media-query(1199px) {
|
|
padding: 11px;
|
|
}
|
|
@include media-query(991px) {
|
|
padding: 10px;
|
|
}
|
|
@include media-query(767px) {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
|
|
// ---- Gap ----
|
|
.gap-4{
|
|
gap: clamp(2px, 0.208vw, 8px);
|
|
}
|
|
.gap-8{
|
|
gap: clamp(4px, 0.417vw, 16px);
|
|
}
|
|
.gap-10{
|
|
gap: clamp(5px, 0.521vw, 20px);
|
|
}
|
|
.gap-12{
|
|
gap: clamp(12px, 0.625vw, 24px);
|
|
}
|
|
.gap-14{
|
|
gap: clamp(10px, 0.729vw, 28px);
|
|
}
|
|
.gap-16{
|
|
gap: clamp(12px, 0.833vw, 32px);
|
|
}
|
|
.gap-18{
|
|
gap: clamp(14px, 0.938vw, 36px);
|
|
}
|
|
.gap-20{
|
|
gap: clamp(16px, 1.042vw, 40px);
|
|
}
|
|
.gap-24{
|
|
gap: clamp(18px, 1.25vw, 48px);
|
|
}
|
|
.gap-32{
|
|
gap: clamp(24px, 1.667vw, 64px);
|
|
}
|
|
.gap-38{
|
|
gap: clamp(28px, 1.979vw, 76px);
|
|
}
|
|
.gap-48{
|
|
gap: clamp(10px, 2.5vw, 28px);
|
|
}
|
|
.gap-64{
|
|
gap: clamp(48px, 3.333vw, 128px);
|
|
} |