.block { padding: 1.9375rem 3.875rem; } .block-half, .frame { padding: 1rem; } .block-half-top { padding-block-start: 1rem; } .block-half-bot { padding-block-end: 1rem; } .block-half-tb { padding-block: 1rem; } .block-half-lr { padding-inline: 1rem; } .block-single, .tagcloud, .note, .alert { padding: 1.9375rem; } .block-single-tb { padding-block: 1.9375rem; } .block-single-lr { padding-inline: 1.9375rem; } .block-single-top, .block-full-content { padding-block-start: 1.9375rem; } .block-single-bot { padding-block-end: 1.9375rem; } .block-mid { padding: 2.9375rem; } .block-mid-tb { padding-block: 2.9375rem; } .block-mid-lr { padding-inline: 2.9375rem; } .block-mid-top { padding-block-start: 2.9375rem; } .block-mid-bot { padding-block-end: 2.9375rem; } .block-double { padding: 3.875rem; } .block-double-tb { padding-block: 3.875rem; } .block-double-lr { padding-inline: 3.875rem; } .block-double-top, .block-full-top { padding-block-start: 3.875rem; } .block-double-bot, .block-full-content { padding-block-end: 3.875rem; } .block-double-content { padding: 1.9375rem 3.875rem 3.875rem; } .pt-none { padding-block-start: 0; } .pr-none { padding-inline-end: 0; } .pb-none { padding-block-end: 0; } .pl-none { padding-inline-start: 0; } @media (min-width: 1366px) { .close-on-desktop { display: none !important; } } @media (min-width: 992px) { [class*="block-full"] { padding-inline: 18.887262079063%; } } @media (max-width: 1366px) { .close-on-max { display: none; } } @media (max-width: 992px) { .block-double, .block-double-content { padding: 3.875rem; } .block-double-tb { padding-block: 3.875rem; } .block-double-lr { padding-inline: 3.875rem; } .block-double-top { padding-block-start: 3.875rem; } .block-double-bot { padding-block-end: 3.875rem; } .sidebar { padding-block: 1.9375rem; } } @media (max-width: 640px) { .block, .block-single, .tagcloud, .note, .alert { padding-inline: 1rem; } .block-double-top { padding-block-start: 1.9375rem; } .block-double-bot { padding-block-end: 1.9375rem; } } .mt-none { margin-block-start: 0 !important; } .mr-none { margin-inline-end: 0; } .mb-none { margin-block-end: 0 !important; } .ml-none { margin-inline-start: 0; } .mt-quad:not(:last-child) { margin-block-start: 7.75rem; } .mb-quad:not(:last-child) { margin-block-end: 7.75rem; } .mt-triple:not(:last-child) { margin-block-start: 5.8125rem; } .mb-triple:not(:last-child) { margin-block-end: 5.8125rem; } .mt-double { margin-block-start: 3.875rem; } .mr-double { margin-inline-end: 3.875rem; } .mb-double:not(:last-child) { margin-block-end: 3.875rem; } .mt-mid { margin-block-start: 2.9375rem; } .mb-mid:not(:last-child) { margin-block-end: 2.9375rem; } .mt-single { margin-block-start: 1.9375rem; } .mr-single { margin-inline-end: 1.9375rem; } .mb-single:not(:last-child) { margin-block-end: 1.9375rem; } .mt-half { margin-block-start: 1rem; } .mr-half { margin-inline-end: 1rem; } .mb-half:not(:last-child), .byline { margin-block-end: 1rem; } .mt-small { margin-block-start: 0.3125rem; } .mr-small { margin-inline-end: 0.3125rem; } .mb-small:not(:last-child) { margin-block-end: 0.3125rem; } .ml-small { margin-inline-start: 0.3125rem; } @media (min-width: 992px) { .content-sidebar .aligncenter.wrap, .content-sidebar .alignleft.wrap { margin-inline-start: -3.875rem; } .content-sidebar .aligncenter.wrap, .content-sidebar .alignright.wrap { margin-inline-end: -3.875rem; } .content-sidebar .aligncenter.wrap-small, .content-sidebar .alignleft.wrap-small, .content-sidebar .alignwide { margin-inline-start: -1.9375rem; } .content-sidebar .aligncenter.wrap-small, .content-sidebar .alignright.wrap-small, .content-sidebar .alignwide { margin-inline-end: -1.9375rem; } } @media (max-width: 992px) { .mt-quad:not(:last-child) { margin-block-start: 5.8125rem; } .mb-quad:not(:last-child) { margin-block-end: 5.8125rem; } .mt-triple:not(:last-child) { margin-block-start: 3.875rem; } .mb-triple:not(:last-child) { margin-block-end: 3.875rem; } } @media (max-width: 768px) { .mt-quad:not(:last-child) { margin-block-start: 3.875rem; } .mb-quad:not(:last-child) { margin-block-end: 3.875rem; } .mt-triple:not(:last-child) { margin-block-start: 1.9375rem; } .mb-triple:not(:last-child), .mb-double:not(:last-child) { margin-block-end: 1.9375rem; } } :root { --grid-1: repeat(1, minmax(0, 1fr)); --grid-2: repeat(2, minmax(0, 1fr)); --grid-3: repeat(3, minmax(0, 1fr)); --grid-4: repeat(4, minmax(0, 1fr)); --grid-5: repeat(5, minmax(0, 1fr)); --grid-6: repeat(6, minmax(0, 1fr)); --grid-7: repeat(7, minmax(0, 1fr)); --grid-8: repeat(8, minmax(0, 1fr)); --grid-9: repeat(9, minmax(0, 1fr)); --grid-10: repeat(10, minmax(0, 1fr)); --grid-11: repeat(11, minmax(0, 1fr)); --grid-12: repeat(12, minmax(0, 1fr)); --grid-1-2: minmax(0, 1fr) minmax(0, 2fr); --grid-1-3: minmax(0, 1fr) minmax(0, 3fr); --grid-2-1: minmax(0, 2fr) minmax(0, 1fr); --grid-2-3: minmax(0, 2fr) minmax(0, 3fr); --grid-3-1: minmax(0, 3fr) minmax(0, 1fr); --grid-3-2: minmax(0, 3fr) minmax(0, 2fr); } [class*="columns-"], [class*="grid-"] { display: grid; gap: var(--space-single); width: 100%; } .col { min-width: 0; position: relative; } .gap-none { gap: 0; } .gap-half { gap: var(--space-half); } .gap-single { gap: var(--space-single); } .gap-mid { gap: var(--space-mid); } .gap-double { gap: var(--space-double); } .columns-2, .grid-2 { grid-template-columns: var(--grid-2); } .columns-3, .grid-3 { grid-template-columns: var(--grid-3); } .columns-4, .grid-4 { grid-template-columns: var(--grid-4); } .columns-5, .grid-5 { grid-template-columns: var(--grid-5); } .columns-6, .grid-6 { grid-template-columns: var(--grid-6); } .grid-n { grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); } .grid-1-2 { grid-template-columns: var(--grid-1-2); } .grid-1-3 { grid-template-columns: var(--grid-1-3); } .grid-2-1 { grid-template-columns: var(--grid-2-1); } .grid-2-3 { grid-template-columns: var(--grid-2-3); } .grid-3-1 { grid-template-columns: var(--grid-3-1); } .grid-3-2 { grid-template-columns: var(--grid-3-2); } @media (max-width: 992px) { .columns-4, .grid-4, .columns-5, .grid-5, .columns-6, .grid-6 { grid-template-columns: var(--grid-3); } } @media (max-width: 768px) { .columns-3, .grid-3, .columns-4, .grid-4, .columns-5, .grid-5, .columns-6, .grid-6 { grid-template-columns: var(--grid-2); } .grid-1-2, .grid-1-3, .grid-2-1, .grid-2-3, .grid-3-1, .grid-3-2 { grid-template-columns: var(--grid-1); } } @media (max-width: 640px) { .columns-2, .grid-2, .columns-3, .grid-3, .columns-4, .grid-4, .columns-5, .grid-5, .columns-6, .grid-6 { grid-template-columns: var(--grid-1); } .grid-2-on-mobile { grid-template-columns: var(--grid-2); } .grid-3-on-mobile { grid-template-columns: var(--grid-3); } } .columns-10-90 { grid-template-columns: minmax(3.75rem, 10%) minmax(0, 1fr); } .columns-20-80 { grid-template-columns: minmax(6.25rem, 20%) minmax(0, 1fr); } .columns-25-75 { grid-template-columns: minmax(7.5rem, 25%) minmax(0, 1fr); } .columns-30-70 { grid-template-columns: minmax(8.75rem, 30%) minmax(0, 1fr); } .columns-35-65 { grid-template-columns: minmax(10rem, 35%) minmax(0, 1fr); } .columns-40-60 { grid-template-columns: minmax(11.25rem, 40%) minmax(0, 1fr); } .columns-45-55 { grid-template-columns: minmax(12.5rem, 45%) minmax(0, 1fr); } .columns-55-45 { grid-template-columns: minmax(13.75rem, 55%) minmax(0, 1fr); } .columns-60-40 { grid-template-columns: minmax(15rem, 60%) minmax(0, 1fr); } .columns-65-35 { grid-template-columns: minmax(16.25rem, 65%) minmax(0, 1fr); } .columns-70-30 { grid-template-columns: minmax(17.5rem, 70%) minmax(0, 1fr); } .columns-75-25 { grid-template-columns: minmax(18.75rem, 75%) minmax(0, 1fr); } .columns-80-20 { grid-template-columns: minmax(20rem, 80%) minmax(0, 1fr); } .columns-90-10 { grid-template-columns: minmax(22.5rem, 90%) minmax(0, 1fr); } @media (max-width: 768px) { [class*="columns-"][class*="-"] { grid-template-columns: 1fr; } } [class*="masonry-"], .two-column, .three-column { column-gap: var(--space-single); } [class*="masonry-"] > * { break-inside: avoid; margin-block-end: var(--space-single); } .masonry-2, .two-column { column-count: 2; } .masonry-3, .three-column { column-count: 3; } .masonry-4 { column-count: 4; } @media (max-width: 992px) { .masonry-3 { column-count: 2; } .masonry-4 { column-count: 3; } } @media (max-width: 768px) { .masonry-4 { column-count: 2; } .two-column, .three-column { column-count: 1; } } @media (max-width: 640px) { .masonry-2, .masonry-3, .masonry-4 { column-count: 1; } .masonry-2-on-mobile { column-count: 2; } } .width-20 { width: 20%; } .width-25 { width: 25%; } .width-30 { width: 30%; } .width-33 { width: 33.333%; } .width-40 { width: 40%; } .width-50 { width: 50%; } .width-60 { width: 60%; } .width-66 { width: 66.666%; } .width-70 { width: 70%; } .width-75 { width: 75%; } .width-80 { width: 80%; } .width-full { width: 100%; } .col-span-2 { grid-column: span 2; } .col-span-3 { grid-column: span 3; } .col-span-4 { grid-column: span 4; } .col-span-full { grid-column: 1 / -1; } .justify-center { justify-items: center; } .justify-start { justify-items: start; } .justify-end { justify-items: end; } .justify-stretch { justify-items: stretch; } .align-center { align-items: center; } .align-start { align-items: start; } .align-end { align-items: end; } .align-stretch { align-items: stretch; } .order-first { order: -1; } .order-last { order: 999; } @media (max-width: 767px) { .reverse-mobile { display: flex; flex-direction: column-reverse; } .reverse-mobile > * { width: 100%; } } @media (max-width: 639px) { .hide-mobile, .nomobile { display: none !important; } } @media (min-width: 640px) and (max-width: 1079px) { .hide-tablet, .hide-mid, .notablet { display: none !important; } } @media (min-width: 1080px) { .hide-desktop { display: none !important; } }