Page MenuHomeSealhub

text-image-block.css
No OneTemporary

text-image-block.css

:root {
--default-font-color: #222;
--secondary: #55a4b4;
--secondary-light-01: #a4d2db;
--secondary-dark-01: #5294a1;
--secondary-dark-02: #3c7c88;
--alto-gray: #e0e0e0;
--dove-gray: #6f6e6e;
--faint-gray: #ededed;
--main: #6d4477;
--main-dark-01: #62386c;
--main-dark-02: #56335d;
--main-dark-03: #4a2a52;
--main-dark-04: #55335d;
--main-light-01: #744d7e;
--main-light-02: #8b7192;
--main-light-03: #a686af;
--main-bg-text: #fff;
--main-bg-text-secondary: hsl(286.4, 15.5%, 86.2%);
--main-dark-02-bg-secondary: #b5a2ba;
--wild-sand: #f6f6f6;
--london-hue: #beadc3;
--wild-sand-bg-text: #000;
--white-bg-text: #6f6e6e;
--white-bg-text-secondary: #000;
--white-bg-text-gray: #565656;
--white-bg-link: #404f6e;
--white-on-darker-bg-text: #fff;
/*px / 24 = N rem*/
--container-width: 50rem;
/* Fonts */
--font-sans-serif: "Inter UI", sans-serif;
}
.tib {
background-color: var(--wild-sand);
overflow: hidden;
}
.tib > * {
box-sizing: border-box;
}
.tib h2 {
font-family: var(--font-sans-serif);
color: var(--secondary);
font-size: 1.5rem;
line-height: 2rem;
margin: 0 0 1rem;
font-weight: 800;
}
.tib h3 {
font-family: var(--font-sans-serif);
line-height: 1rem;
font-size: 0.8rem;
margin: 0 0 1rem;
}
.tib p {
color: var(--dove-gray);
font-family: var(--font-sans-serif);
}
.tib picture {
width: 100%;
margin: 1rem 1rem 0 1rem;
}
.tib hr {
height: 1px;
background-color: #dbdbdb;
max-width: var(--container-width);
width: 100%;
margin: 0 auto;
border: none;
}
.tib__body {
margin: 0 auto;
padding: 0 0 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.tib__body--image-on-right {
flex-direction: row;
}
.tib__body--image-on-left {
flex-direction: row-reverse;
}
.tib__body-left,
.tib__body-right {
padding: 1rem 1rem 0 1rem;
}
.tib__body-left {
width: 350px;
}
.tib__body-right {
display: flex;
width: 640px;
aspect-ratio: initial;
}
@container (min-width: 1560px) and (max-width: 2000px) {
.tib__body {
gap: 1.5rem;
}
}
@container (max-width: 1559px) {
.tib__body {
gap: 1rem;
}
}
@container (max-width: 930px) {
.tib__body-right {
width: 350px;
flex-grow: 1;
aspect-ratio: initial;
}
}
@container (max-width: 800px) {
.tib__body--image-on-right {
flex-direction: column;
}
.tib__body--image-on-left {
flex-direction: column-reverse;
}
.tib__body-right {
width: 350px;
}
.tib__body-left {
width: 350px;
}
.tib picture {
margin: 0;
}
}
@container (max-width: 620px) {
}
@container (max-width: 579px) {
}
@container (max-width: 500px) {
.tib__body-right {
min-width: unset;
width: 100%;
}
.tib__body-left {
min-width: unset;
width: 100%;
}
.tib__body {
padding: 1rem;
}
}

File Metadata

Mime Type
text/plain
Expires
Tue, Feb 25, 06:36 (1 d, 17 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
610484
Default Alt Text
text-image-block.css (2 KB)

Event Timeline