*, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } article, aside, footer, header, hgroup, main, nav, section { display: block; } li { list-style: none; } img { height: auto; max-width: 100%; vertical-align: top; } button, input, select, textarea { font: inherit; } address { font-style: normal; } ::-moz-selection { background: var(--color); color: var(--white); } ::selection { background: var(--color); color: var(--white); } :focus-visible { outline: 2px solid var(--color) !important; outline-offset: 2px; } html { font-size: var(--font-size); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } html.no-scroll { overflow: hidden; position: fixed; } body { background: var(--page-bg); color: var(--text-color); font-family: var(--body-font); font-variation-settings: "wght" var(--font-weight-normal); letter-spacing: var(--letter-spacing); line-height: var(--line-height); -ms-scroll-chaining: none; overscroll-behavior: none; } a { text-decoration: none; } a { color: var(--link-color); -webkit-transition: all 0.24s ease-out; transition: all 0.24s ease-out; } a:hover { color: var(--link-color-hover); } a:active { color: var(--link-color-hover); } a:focus { outline: none; } .invert { color: var(--link-color-hover); -webkit-transition: all 0.24s ease-out; transition: all 0.24s ease-out; } .invert:hover { color: var(--link-color); } .invert:active { color: var(--link-color); } .invert:focus { outline: none; } p, ul, ol, dl { margin-top: calc(var(--baseline) * 4 + 0.25vw); } blockquote, figure, hr, pre, table { margin-top: calc(var(--baseline) * 6 + 0.5vw); margin-bottom: calc(var(--baseline) * 6 + 0.5vw); } h1, h2, h3, h4, h5, h6 { color: var(--headings-color); font-family: var(--heading-font); font-variation-settings: "wght" var(--headings-weight); font-style: var(--headings-style); -ms-hyphens: manual; hyphens: manual; letter-spacing: var(--headings-letter-spacing); line-height: var(--headings-line-height); margin-top: calc(var(--baseline) * 6 + 1vw); text-transform: var(--headings-transform); } h1, .h1 { font-size: clamp(1.5710900065rem, 1.5710900065rem + 1.424540906 * (100vw - 20rem) / 70, 2.9956309125rem); font-family: var(--heading-font); } h2, .h2 { font-size: clamp(1.3808408252rem, 1.3808408252rem + 0.9332127447 * (100vw - 20rem) / 70, 2.3140535699rem); } h3, .h3 { font-size: clamp(1.2136296308rem, 1.2136296308rem + 0.4621997101 * (100vw - 20rem) / 70, 1.6758293408rem); } h4, .h4 { font-size: clamp(1.1377777785rem, 1.1377777785rem + 0.1567604947 * (100vw - 20rem) / 70, 1.2945382732rem); } h5, .h5 { font-size: clamp(1.066666667rem, 1.066666667rem + 0.0711111115 * (100vw - 20rem) / 70, 1.1377777785rem); } h6, .h6 { font-size: clamp(1rem, 1rem + 0 * (100vw - 20rem) / 70, 1rem); } h2 + *, h3 + *, h4 + *, h5 + *, h6 + * { margin-top: calc(var(--baseline) * 2 + 0.25vw); } b, strong { font-variation-settings: "wght" var(--font-weight-bold); } blockquote { border-top: 2px solid var(--dark); border-bottom: 2px solid var(--dark); color: var(--headings-color); font-family: var(--heading-font); font-style: italic; font-variation-settings: "wght" var(--font-weight-bold); padding: calc(var(--baseline) * 6 + 1vw) 2rem; font-size: clamp(1.1377777785rem, 1.1377777785rem + 0.1567604947 * (100vw - 20rem) / 70, 1.2945382732rem); } blockquote > :nth-child(1) { margin-top: 0; } ul, ol { margin-left: 3ch; } ul > li, ol > li { list-style: inherit; padding: 0 0 var(--baseline) 1ch; } dl dt { font-variation-settings: "wght" var(--font-weight-bold); } pre { background-color: var(--lighter); font-size: 0.8239746086rem; padding: calc(var(--baseline) * 6); white-space: pre-wrap; word-wrap: break-word; } pre > code { color: var(--text-color); display: inline-block; font-size: inherit; padding: 0; } code { background-color: var(--lighter); color: var(--color); font-size: 0.8239746086rem; font-family: Menlo, Monaco, Consolas, Courier New, monospace; } table { border: 1px solid var(--light); border-collapse: collapse; border-spacing: 0; vertical-align: top; text-align: left; width: 100%; } @media all and (max-width: 37.4375em) { table { display: block; overflow-x: auto; } } table th { font-variation-settings: "wght" var(--font-weight-bold); padding: calc(var(--baseline) * 2.5) calc(var(--baseline) * 4); } table td { border-top: 1px solid var(--light); padding: calc(var(--baseline) * 2.5) calc(var(--baseline) * 4); } .table-striped tr:nth-child(2n) { background: var(--lighter); } .table-bordered th, .table-bordered td { border: 1px solid var(--light); } .table-title th { background: var(--lighter); } figcaption { clear: both; color: var(--gray); font-style: italic; font-size: 0.7241964329rem; padding: calc(var(--baseline) * 3) 0 0; text-align: center; } kbd { background: var(--dark); border-radius: 2px; color: var(--white); font-family: Menlo, Monaco, Consolas, Courier New, monospace; font-size: 0.8789062495rem; padding: calc(var(--baseline) * 0.5) calc(var(--baseline) * 1.5); } sub, sup { font-size: 65%; } small { font-size: 0.8789062495rem; } hr, .separator { background: none; border: none; height: auto; line-height: 1; max-width: none; text-align: center; } hr::before, .separator::before { content: "•••"; color: var(--dark); font-size: 1rem; font-variation-settings: "wght" var(--font-weight-bold); letter-spacing: 1.1377777785rem; padding-left: 1.1377777785rem; } .separator--dot::before { content: "•"; color: var(--dark); font-size: 1rem; font-variation-settings: "wght" var(--font-weight-bold); letter-spacing: 1.1377777785rem; padding-left: 1.1377777785rem; } .separator--long-line { position: relative; } .separator--long-line::before { content: ""; height: 1rem; } .separator--long-line::after { border-top: 1px solid var(--light); content: ""; height: 1px; position: absolute; width: 100%; top: 50%; left: 0; } .btn, [type=button], [type=submit], button { align-items: center; background: none; border: 1px solid var(--dark); border-radius: calc(var(--border-radius) * 10); color: var(--dark); cursor: pointer; display: inline-flex; font-family: var(--menu-font); font-size: 0.8239746086rem; font-variation-settings: "wght" var(--font-weight-bold); overflow: hidden; padding: calc(var(--baseline) * 2) calc(var(--baseline) * 4); text-align: center; -webkit-transition: all 0.24s ease-out; transition: all 0.24s ease-out; vertical-align: middle; will-change: transform; } @media all and (max-width: 19.9375em) { .btn, [type=button], [type=submit], button { width: 100%; } } .btn:hover, [type=button]:hover, [type=submit]:hover, button:hover, .btn:active, [type=button]:active, [type=submit]:active, button:active, .btn:focus, [type=button]:focus, [type=submit]:focus, button:focus { background-color: var(--dark); color: var(--helper); } .btn--icon { gap: 0.3rem; justify-content: center; } .btn--icon svg { stroke: currentColor; } @media all and (min-width: 20em) { .btn + .btn, [type=button] + .btn, [type=submit] + .btn, button + .btn, .btn + [type=button], [type=button] + [type=button], [type=submit] + [type=button], button + [type=button], .btn + [type=submit], [type=button] + [type=submit], [type=submit] + [type=submit], button + [type=submit], .btn + button, [type=button] + button, [type=submit] + button, button + button { margin-left: calc(var(--baseline) * 2); } } @media all and (max-width: 37.4375em) { .btn + .btn, [type=button] + .btn, [type=submit] + .btn, button + .btn, .btn + [type=button], [type=button] + [type=button], [type=submit] + [type=button], button + [type=button], .btn + [type=submit], [type=button] + [type=submit], [type=submit] + [type=submit], button + [type=submit], .btn + button, [type=button] + button, [type=submit] + button, button + button { margin-bottom: calc(var(--baseline) * 2); } } .btn:disabled, [type=button]:disabled, [type=submit]:disabled, button:disabled, .btn[disabled], [disabled][type=button], [disabled][type=submit], button[disabled] { background-color: var(--light); border-color: var(--light); color: var(--gray); cursor: not-allowed; pointer-events: none; } [type=button], [type=submit], button { -webkit-appearance: none; -moz-appearance: none; } ::-webkit-search-cancel-button { -webkit-appearance: none; } fieldset { border: 1px solid var(--light); margin: calc(var(--baseline) * 6 + 1vw) 0 0; padding: calc(var(--baseline) * 6); } fieldset > legend { margin-left: -1rem; padding: 0 1rem; } legend { font-variation-settings: "wght" 500; padding: 0; } label { font-variation-settings: "wght" 500; margin: 0 calc(var(--baseline) * 4) calc(var(--baseline) * 3) 0; } [type=text], [type=url], [type=tel], [type=number], [type=email], [type=search], textarea, select { background-color: var(--page-bg); border: none; border: 1px solid var(--light); color: var(--text-color); font-size: 1rem; outline: none; padding: calc(var(--baseline) * 1.2) calc(var(--baseline) * 3); vertical-align: middle; width: 100%; -webkit-appearance: none; -moz-appearance: none; } @media all and (min-width: 37.5em) { [type=text], [type=url], [type=tel], [type=number], [type=email], [type=search], textarea, select { width: auto; } } [type=text]:focus, [type=url]:focus, [type=tel]:focus, [type=number]:focus, [type=email]:focus, [type=search]:focus, textarea:focus, select:focus { border-color: var(--dark); } input[type=checkbox], input[type=radio] { opacity: 0; position: absolute; } input[type=checkbox] + label, input[type=radio] + label { position: relative; margin-left: -1px; cursor: pointer; padding: 0; } input[type=checkbox] + label:before, input[type=radio] + label:before { background-color: var(--white); border: 1px solid var(--light); border-radius: 2px; content: ""; display: inline-block; height: calc(var(--baseline) * 5); line-height: calc(var(--baseline) * 5); margin-right: calc(var(--baseline) * 4); vertical-align: middle; text-align: center; width: calc(var(--baseline) * 5); } input[type=checkbox]:checked + label:before, input[type=radio]:checked + label:before { content: ""; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8'%3e%3cpolygon points='9.53 0 4.4 5.09 1.47 2.18 0 3.64 2.93 6.54 4.4 8 5.87 6.54 11 1.46 9.53 0' fill='%23d73a42'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-size: 11px 8px; background-position: 50% 50%; } input[type=radio] + label:before { border-radius: 50%; } input[type=radio]:checked + label:before { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3ccircle cx='4' cy='4' r='4' fill='%23d73a42'/%3e%3c/svg%3e"); } [type=file] { margin-bottom: calc(var(--baseline) * 6); width: 100%; } select { max-width: 100%; width: auto; position: relative; } select:not([multiple]) { background: url('data:image/svg+xml;utf8,') no-repeat 90% 50%; background-size: 8px; padding-right: calc(var(--baseline) * 12); } select[multiple] { border: 1px solid var(--light); padding: calc(var(--baseline) * 6); width: 100%; } select[multiple]:hover { border-color: var(--light); } select[multiple]:focus { border-color: var(--dark); } select[multiple]:disabled { background-color: var(--light); cursor: not-allowed; } select[multiple]:disabled:hover { border-color: var(--light); } textarea { display: block; overflow: auto; resize: vertical; max-width: 100%; } .top { align-items: center; display: flex; height: var(--navbar-height); position: relative; padding: 0 var(--page-margin); -webkit-transition: background 0.5s ease; transition: background 0.5s ease; width: 100%; z-index: 2; } @media all and (min-width: 56.25em) { .top { justify-content: space-between; height: var(--navbar-height); } } .top.sticky { background: var(--page-bg); position: sticky; top: -100px; -webkit-animation: slideDown 0.5s cubic-bezier(0.17, 0.67, 0, 1) forwards; animation: slideDown 0.5s cubic-bezier(0.17, 0.67, 0, 1) forwards; } @-webkit-keyframes slideDown { from { opacity: 0; top: -100px; } to { opacity: 1; top: 0; } } @keyframes slideDown { from { opacity: 0; top: -100px; } to { opacity: 1; top: 0; } } .logo { color: var(--logo-color) !important; font-size: 1.2136296308rem; font-family: var(--logo-font); font-variation-settings: "wght" var(--font-weight-bold); margin-right: auto; order: 1; } .logo > img { height: var(--navbar-height); -o-object-fit: contain; object-fit: contain; padding: calc(var(--baseline) * 2) 0; width: auto; } .search { order: 2; } @media all and (min-width: 56.25em) { .search { order: 3; } } .search__btn { border-color: var(--light); margin: 0; height: 2.2rem; padding: 0; width: 2.2rem; } @media all and (min-width: 56.25em) { .search__btn { margin-left: 2rem; } } .search__btn:hover, .search__btn:focus { border-color: var(--dark); } .search__form { display: flex; justify-content: space-between; width: 100%; } .search__form button { width: auto; flex-shrink: 0; } .search__input { background: none; border: none; border-bottom: 1px solid var(--dark); display: block; font-family: var(--heading-font); padding: 0; width: 90%; } .search__input:focus-visible { outline: none !important; } .search__overlay { background-color: var(--page-bg); -webkit-box-shadow: 0 3px 30px rgba(0, 0, 0, 0.05); box-shadow: 0 3px 30px rgba(0, 0, 0, 0.05); left: 0; opacity: 0; position: fixed; -webkit-transition: all 0.24s ease-out; transition: all 0.24s ease-out; top: 0; visibility: hidden; width: 100%; z-index: 2005; } .search__overlay-inner { -webkit-animation: slideininput 0.24s 1s forwards; animation: slideininput 0.24s 1s forwards; align-items: center; display: flex; height: calc(var(--navbar-height) * 3); justify-content: space-between; padding: 0 var(--page-margin); opacity: 0; scale: 0.9; } @-webkit-keyframes slideininput { 60% { opacity: 0; scale: 0.9; } 100% { opacity: 1; scale: 1; } } @keyframes slideininput { 60% { opacity: 0; scale: 0.9; } 100% { opacity: 1; scale: 1; } } .search__overlay.expanded { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; display: block; visibility: visible; } .navbar { order: 3; } .navbar .navbar__menu { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } @media all and (max-width: 56.1875em) { .navbar .navbar__menu { display: none; } } .navbar .navbar__menu li { font-family: var(--menu-font); display: block; font-size: 0.8789062495rem; line-height: var(--line-height); font-variation-settings: "wght" 500; padding: 0; position: relative; width: auto; } .navbar .navbar__menu li a, .navbar .navbar__menu li span[aria-haspopup=true] { color: var(--nav-link-color); display: block; padding: 0 0.6rem; -webkit-transition: all 0.24s ease-out; transition: all 0.24s ease-out; } .navbar .navbar__menu li a:active, .navbar .navbar__menu li a:focus, .navbar .navbar__menu li a:hover, .navbar .navbar__menu li span[aria-haspopup=true]:active, .navbar .navbar__menu li span[aria-haspopup=true]:focus, .navbar .navbar__menu li span[aria-haspopup=true]:hover { color: var(--nav-link-color-hover); } .navbar .navbar__menu li span { color: var(--nav-link-color); cursor: default; display: block; padding: 0 0.6rem; } .navbar .navbar__menu > li:hover > a, .navbar .navbar__menu > li:hover > span[aria-haspopup=true] { color: var(--nav-link-color-hover); } .navbar .has-submenu:active > .navbar__submenu, .navbar .has-submenu:focus > .navbar__submenu, .navbar .has-submenu:hover > .navbar__submenu { left: 0; opacity: 1; -webkit-transform: scale(1); transform: scale(1); visibility: visible; margin-top: 0.8rem; } .navbar .has-submenu:active > .navbar__submenu:before, .navbar .has-submenu:focus > .navbar__submenu:before, .navbar .has-submenu:hover > .navbar__submenu:before { content: ""; height: 1rem; left: 0; position: absolute; width: 100%; top: -1rem; } .navbar .has-submenu:active > .navbar__submenu.is-right-submenu, .navbar .has-submenu:focus > .navbar__submenu.is-right-submenu, .navbar .has-submenu:hover > .navbar__submenu.is-right-submenu { left: auto; right: 0; -webkit-transform-origin: right top; transform-origin: right top; } .navbar .has-submenu .has-submenu:active > .navbar__submenu, .navbar .has-submenu .has-submenu:focus > .navbar__submenu, .navbar .has-submenu .has-submenu:hover > .navbar__submenu { top: 0; margin-top: 0; } .navbar .has-submenu .has-submenu:active > .navbar__submenu.is-right-submenu, .navbar .has-submenu .has-submenu:focus > .navbar__submenu.is-right-submenu, .navbar .has-submenu .has-submenu:hover > .navbar__submenu.is-right-submenu { top: 0; margin-top: 0; } .navbar .navbar__submenu { background: var(--lighter); border-radius: calc(var(--border-radius) * 4); left: -9999px; list-style-type: none; margin: 0; padding: 1rem 0.85rem; position: absolute; visibility: hidden; white-space: nowrap; z-index: 1; opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8); -webkit-transform-origin: 0 top; transform-origin: 0 top; -webkit-transition: opacity 0.15s, -webkit-transform 0.3s cubic-bezier(0.275, 1.375, 0.8, 1); transition: opacity 0.15s, -webkit-transform 0.3s cubic-bezier(0.275, 1.375, 0.8, 1); transition: opacity 0.15s, transform 0.3s cubic-bezier(0.275, 1.375, 0.8, 1); transition: opacity 0.15s, transform 0.3s cubic-bezier(0.275, 1.375, 0.8, 1), -webkit-transform 0.3s cubic-bezier(0.275, 1.375, 0.8, 1); } .navbar .navbar__submenu__submenu { z-index: 2; } .navbar .navbar__submenu li { line-height: 1.5; font-size: 0.8789062495rem; } .navbar .navbar__submenu li a, .navbar .navbar__submenu li span[aria-haspopup=true] { border-radius: calc(var(--border-radius) * 3); color: var(--nav-link-color-hover); padding: 0.5rem 1rem; -webkit-transition: all 0.24s ease; transition: all 0.24s ease; } .navbar .navbar__submenu li a:active, .navbar .navbar__submenu li a:focus, .navbar .navbar__submenu li a:hover, .navbar .navbar__submenu li span[aria-haspopup=true]:active, .navbar .navbar__submenu li span[aria-haspopup=true]:focus, .navbar .navbar__submenu li span[aria-haspopup=true]:hover { background: var(--page-bg); color: var(--nav-link-color); } .navbar .navbar__submenu li span { color: var(--nav-link-color-hover) !important; padding: 0.5rem 1rem; } .navbar .navbar__submenu li:hover > a, .navbar .navbar__submenu li:hover > span[aria-haspopup=true] { color: var(--nav-link-color); } .navbar .navbar__toggle { background: var(--black); -webkit-box-shadow: none; box-shadow: none; border: none; cursor: pointer; display: block; line-height: 1; margin: 0; overflow: visible; padding: 0; position: relative; right: 0; margin-left: 0.75rem; text-transform: none; z-index: 2004; height: 3.2rem; padding: 0; width: 3.2rem; } @media all and (min-width: 56.25em) { .navbar .navbar__toggle { display: none; } } .navbar .navbar__toggle:hover, .navbar .navbar__toggle:focus { -webkit-box-shadow: none; box-shadow: none; outline: none; -webkit-transform: none; transform: none; } .navbar .navbar__toggle-box { width: 20px; height: 14px; display: inline-block; position: relative; } .navbar .navbar__toggle-inner { display: block; top: 50%; text-indent: -9999999em; } .navbar .navbar__toggle-inner::before { content: ""; display: block; top: -5px; } .navbar .navbar__toggle-inner::after { content: ""; display: block; bottom: -5px; } .navbar .navbar__toggle-inner, .navbar .navbar__toggle-inner::before, .navbar .navbar__toggle-inner::after { width: 20px; height: 1px; background-color: var(--white); position: absolute; -webkit-transition: opacity 0.14s ease-out, -webkit-transform; transition: opacity 0.14s ease-out, -webkit-transform; transition: transform, opacity 0.14s ease-out; transition: transform, opacity 0.14s ease-out, -webkit-transform; } .navbar .navbar__toggle-inner { -webkit-transition-duration: 0.075s; transition-duration: 0.075s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .navbar .navbar__toggle-inner::before { -webkit-transition: top 0.075s ease 0.12s, opacity 0.075s ease; transition: top 0.075s ease 0.12s, opacity 0.075s ease; } .navbar .navbar__toggle-inner::after { -webkit-transition: bottom 0.075s ease 0.12s, -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s ease 0.12s, -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s ease 0.12s, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s ease 0.12s, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .navbar .navbar__toggle.is-active .navbar__toggle-inner { -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition-delay: 0.12s; transition-delay: 0.12s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .navbar .navbar__toggle.is-active .navbar__toggle-inner::before { top: 0; opacity: 0; -webkit-transition: top 0.075s ease, opacity 0.075s ease 0.12s; transition: top 0.075s ease, opacity 0.075s ease 0.12s; } .navbar .navbar__toggle.is-active .navbar__toggle-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: bottom 0.075s ease, -webkit-transform 0.075s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s; transition: bottom 0.075s ease, -webkit-transform 0.075s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s; transition: bottom 0.075s ease, transform 0.075s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s; transition: bottom 0.075s ease, transform 0.075s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s, -webkit-transform 0.075s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s; } .navbar_mobile_overlay { background: var(--page-bg); height: calc(100vh - 4.4rem); left: 0; opacity: 1; overflow: auto; pointer-events: auto; position: fixed; top: 4.4rem; -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.3, 1); transition: all 0.3s cubic-bezier(0, 0, 0.3, 1); width: 100%; z-index: 1001; } .navbar_mobile_overlay.is-hidden { opacity: 0; pointer-events: none; } .navbar_mobile_overlay .navbar__menu { margin: 24px; } .navbar_mobile_overlay .navbar__menu li { list-style: none; margin: 0; padding: 0; text-align: center; } .navbar_mobile_overlay .navbar__menu li a, .navbar_mobile_overlay .navbar__menu li span { color: var(--dark); display: block; padding: calc(var(--baseline) * 2); position: relative; } .navbar_mobile_overlay .navbar__menu li a:active, .navbar_mobile_overlay .navbar__menu li a:focus, .navbar_mobile_overlay .navbar__menu li a:hover, .navbar_mobile_overlay .navbar__menu li span:active, .navbar_mobile_overlay .navbar__menu li span:focus, .navbar_mobile_overlay .navbar__menu li span:hover { color: var(--dark); } .navbar_mobile_overlay .navbar__menu li a[aria-haspopup=true]::after, .navbar_mobile_overlay .navbar__menu li span[aria-haspopup=true]::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: currentColor transparent transparent transparent; left: calc(var(--baseline) * 2); top: 15px; position: relative; } .navbar_mobile_overlay .navbar__submenu { margin: 0; padding: 0; visibility: hidden; } .navbar_mobile_overlay .navbar__submenu[aria-hidden=false] { visibility: visible; } .navbar_mobile_overlay .navbar__submenu_wrapper { height: 0; opacity: 0; overflow: hidden; -webkit-transition: all 0.3s cubic-bezier(0.275, 1.375, 0.8, 1); transition: all 0.3s cubic-bezier(0.275, 1.375, 0.8, 1); } .navbar_mobile_overlay .navbar__submenu_wrapper.is-active { height: auto; opacity: 1; } .navbar_mobile_sidebar { background: var(--page-bg); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); height: 100vh; left: 0; max-width: 400px; overflow: auto; position: fixed; top: 0; -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.3, 1); transition: all 0.3s cubic-bezier(0, 0, 0.3, 1); width: 80%; z-index: 1001; } .navbar_mobile_sidebar.is-hidden { left: -400px; } .navbar_mobile_sidebar .navbar__menu { margin: 24px; } .navbar_mobile_sidebar .navbar__menu li { font-family: var(--menu-font); font-size: 16px; list-style: none; line-height: 1.3; margin: 0; padding: 0; } .navbar_mobile_sidebar .navbar__menu li a, .navbar_mobile_sidebar .navbar__menu li .is-separator { color: var(--dark); display: block; padding: 10px 20px 10px 0; position: relative; } .navbar_mobile_sidebar .navbar__menu li a:active, .navbar_mobile_sidebar .navbar__menu li a:focus, .navbar_mobile_sidebar .navbar__menu li a:hover, .navbar_mobile_sidebar .navbar__menu li .is-separator:active, .navbar_mobile_sidebar .navbar__menu li .is-separator:focus, .navbar_mobile_sidebar .navbar__menu li .is-separator:hover { color: var(--dark); } .navbar_mobile_sidebar .navbar__menu li a[aria-haspopup=true]::after, .navbar_mobile_sidebar .navbar__menu li .is-separator[aria-haspopup=true]::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: currentColor transparent transparent transparent; right: 0; top: 18px; position: absolute; } .navbar_mobile_sidebar .navbar__submenu { margin: 0 0 0 24px; padding: 0; visibility: hidden; } .navbar_mobile_sidebar .navbar__submenu[aria-hidden=false] { visibility: visible; } .navbar_mobile_sidebar .navbar__submenu_wrapper { height: 0; opacity: 0; overflow: hidden; -webkit-transition: all 0.3s cubic-bezier(0.275, 1.375, 0.8, 1); transition: all 0.3s cubic-bezier(0.275, 1.375, 0.8, 1); } .navbar_mobile_sidebar .navbar__submenu_wrapper.is-active { height: auto; opacity: 1; } .navbar_mobile_sidebar__overlay { background: rgba(0, 0, 0, 0.5); height: 100%; opacity: 1; pointer-events: auto; position: fixed; top: 0; -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.3, 1); transition: all 0.3s cubic-bezier(0, 0, 0.3, 1); width: 100%; z-index: 10; } .navbar_mobile_sidebar__overlay.is-hidden { opacity: 0; pointer-events: none; } .wrapper { -webkit-box-sizing: content-box; box-sizing: content-box; max-width: var(--page-width); margin-left: auto; margin-right: auto; padding-left: var(--page-margin); padding-right: var(--page-margin); } .entry-wrapper { -webkit-box-sizing: content-box; box-sizing: content-box; max-width: var(--entry-width); margin-left: auto; margin-right: auto; padding-left: var(--page-margin); padding-right: var(--page-margin); } .hero { position: relative; z-index: 1; } .hero--noimage::after { background: var(--dark); content: ""; display: block; height: 1px; bottom: 0; width: calc(100% - var(--page-margin) * 2); z-index: -1; max-width: var(--page-width); position: absolute; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .hero__content { padding-bottom: calc(var(--baseline) * 6 + 1.5vw); } .hero__content h1 > sup { font-size: 1.066666667rem; vertical-align: top; } .hero__content--centered { text-align: center; } .hero__content--centered .content__meta { justify-content: center; } .hero__cta { margin-top: calc(var(--baseline) * 6); } .hero__image { margin: 0 var(--page-margin); } .hero__image-wrapper { position: relative; background: var(--lighter); border-radius: calc(var(--border-radius) * 4); } @media all and (min-width: 56.25em) { .hero__image-wrapper { height: var(--hero-height); } } .hero__image-wrapper img { border-radius: inherit; display: block; height: 100%; -o-object-fit: cover; object-fit: cover; width: 100%; } @media all and (min-width: 56.25em) { .hero__image-wrapper img { height: var(--hero-height); } } .hero__image > figcaption { background: var(--page-bg); } @media all and (min-width: 56.25em) { .hero__image > figcaption { text-align: right; } } .feed__item { display: flex; flex-wrap: wrap; gap: calc(2rem + 2vw); margin-top: calc(var(--baseline) * 12 + 2vw); } @media all and (min-width: 37.5em) { .feed__item { flex-wrap: nowrap; } } .feed__item--centered { justify-content: center; } .feed__content { max-width: var(--entry-width); } .feed__image { background: var(--lighter); border-radius: calc(var(--border-radius) * 4); flex-shrink: 0; height: 100%; margin: 0; width: 100%; } @media all and (min-width: 37.5em) { .feed__image { height: calc(var(--feed-image-size) + 4vw); width: calc(var(--feed-image-size) + 4vw); } } .feed__image > img { border-radius: inherit; display: inline-block; height: 100%; -o-object-fit: cover; object-fit: cover; width: 100%; } .feed__image--wide { max-width: var(--page-width); } .feed__meta { align-items: center; color: var(--gray); display: flex; font-size: 0.8239746086rem; gap: 0.8rem; margin-bottom: calc(var(--baseline) * 3); } .feed__author { font-family: var(--menu-font); font-variation-settings: "wght" var(--font-weight-bold); text-decoration: none; } .feed__author-thumb { border-radius: 50%; height: 1.7rem; margin-right: -0.2rem; width: 1.7rem; } .feed__date { color: var(--gray); font-style: italic; } .feed__author + .feed__date::before { content: ""; background: var(--light); display: inline-block; height: 1px; margin-right: 4px; width: 1rem; vertical-align: middle; } .feed__readmore { margin-top: calc(var(--baseline) * 4 + 0.25vw); } .feed__title { margin-top: 0; } .feed--grid { margin: 0; } @media all and (min-width: 37.5em) { .feed--grid { display: grid; grid-template-columns: 100%; gap: 0 3rem; } } @media all and (min-width: 56.25em) { .feed--grid { grid-template-columns: repeat(2, 1fr); } } .feed--grid h2 { margin-top: 0; } .feed--grid sup { font-size: 1.066666667rem; vertical-align: top; } .feed--grid li { align-items: center; list-style: none; gap: 2rem; padding: 0; } .content { overflow: hidden; } .content__meta { margin-top: calc(var(--baseline) * 4 + 0.25vw); margin-bottom: 0; } .content__meta--centered { justify-content: center; } .content__entry { margin-top: calc(var(--baseline) * 6 + 1.5vw); overflow-wrap: break-word; } .content__entry > :nth-child(1) { margin-top: 0; } .content__entry a:not(.btn):not([type=button]):not([type=submit]):not(button):not(.post__toc a):not(.gallery__item a) { color: var(--link-color-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } .content__entry a:not(.btn):not([type=button]):not([type=submit]):not(button):not(.post__toc a):not(.gallery__item a):hover, .content__entry a:not(.btn):not([type=button]):not([type=submit]):not(button):not(.post__toc a):not(.gallery__item a):active, .content__entry a:not(.btn):not([type=button]):not([type=submit]):not(button):not(.post__toc a):not(.gallery__item a):focus { color: var(--link-color); } .content__entry--nospace { margin-top: 0; } .content__avatar-thumbs { border-radius: 50%; height: 4.5rem; width: 4.5rem; } .content__footer { margin-top: calc(var(--baseline) * 9 + 1vw); } .content__updated { color: var(--gray); font-size: 0.8789062495rem; font-style: italic; } .content__actions { align-items: baseline; display: flex; flex-basis: auto; gap: 2rem; justify-content: space-between; margin-top: calc(var(--baseline) * 4 + 0.25vw); position: relative; } .content__share { flex-shrink: 0; } .content__share-button { border-color: var(--light); } .content__share-popup { background: var(--lighter); border-radius: calc(var(--border-radius) * 4); bottom: 140%; display: none; padding: 1rem 0.85rem; position: absolute; right: 0; text-align: left; z-index: 1; } .content__share-popup.is-visible { -webkit-animation: share-popup 0.48s cubic-bezier(0.17, 0.67, 0.6, 1.34) backwards; animation: share-popup 0.48s cubic-bezier(0.17, 0.67, 0.6, 1.34) backwards; display: block; } @-webkit-keyframes share-popup { from { -webkit-transform: scale(0.9); transform: scale(0.9); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes share-popup { from { -webkit-transform: scale(0.9); transform: scale(0.9); } to { -webkit-transform: scale(1); transform: scale(1); } } .content__share-popup > a { border-radius: calc(var(--border-radius) * 3); color: var(--text-color); display: block; font-family: var(--menu-font); font-size: 0.8239746086rem; padding: 0.4rem 0.8rem; } .content__share-popup > a:hover { background: var(--page-bg); color: var(--text-color); text-decoration: none; } .content__share-popup > a > svg { fill: var(--text-color); display: inline-block; height: 0.9rem; margin-right: 0.5666666667rem; pointer-events: none; vertical-align: middle; width: 0.9rem; } .content__tag { margin: 0; font-family: var(--menu-font); font-size: 0.8239746086rem; } .content__tag > li { display: inline-flex; margin: 0.3rem 0.3rem 0.3rem 0; padding: 0; } .content__tag > li > a { border: 1px solid var(--light); border-radius: calc(var(--border-radius) * 10); color: var(--dark); font-size: 0.7241964329rem; font-variation-settings: "wght" var(--font-weight-normal); padding: calc(var(--baseline) * 1) calc(var(--baseline) * 2.5); } .content__tag > li > a:hover { border-color: var(--dark); } .content__bio { display: flex; margin: calc(var(--baseline) * 12 + 1vw) 0; } @media all and (min-width: 37.5em) { .content__bio { align-items: center; } } @media all and (min-width: 37.5em) { .content__bio::before { content: ""; border-top: 1px solid var(--light); height: 1px; margin-right: 2rem; width: 30%; } } .bio__avatar { border-radius: 50%; flex-shrink: 0; height: 2.5rem; margin-right: 1.2rem; width: 2.5rem; } @media all and (min-width: 37.5em) { .bio__avatar { height: 4rem; margin-right: 2rem; width: 4rem; } } .bio__name { margin: 0; } .bio__desc { font-family: var(--body-font); font-size: 0.8789062495rem; line-height: 1.5; } .bio__desc > :nth-child(1) { margin-top: calc(var(--baseline) * 2); } .bio__desc a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } .bio__desc a { color: var(--link-color-hover); -webkit-transition: all 0.24s ease-out; transition: all 0.24s ease-out; } .bio__desc a:hover { color: var(--link-color); } .bio__desc a:active { color: var(--link-color); } .bio__desc a:focus { outline: none; } .content__nav { margin-top: calc(var(--baseline) * 16 + 1vw); } .content__nav-inner { border-top: 1px solid var(--dark); border-bottom: 1px solid var(--dark); padding: calc(var(--baseline) * 16) 0; } @media all and (min-width: 37.5em) { .content__nav-inner { display: flex; gap: 1rem; justify-content: space-between; } } @media all and (min-width: 56.25em) { .content__nav-inner { gap: 2rem; } } @media all and (max-width: 37.4375em) { .content__nav-prev + .content__nav-next { margin-top: calc(var(--baseline) * 6 + 1vw); } } @media all and (min-width: 37.5em) { .content__nav-next { margin-left: auto; text-align: right; } } .content__nav-link { font-family: var(--heading-font); font-variation-settings: "wght" var(--font-weight-bold); font-style: italic; height: 100%; line-height: 1.5; display: flex; gap: 1rem; justify-content: space-between; align-items: center; } @media all and (min-width: 37.5em) { .content__nav-link { gap: 2rem; } } .content__nav-link > div { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } @media all and (min-width: 56.25em) { .content__nav-link > div { -webkit-line-clamp: 4; } } .content__nav-link span { color: var(--gray); display: block; font-size: 0.7724761953rem; font-family: var(--menu-font); font-style: normal; font-variation-settings: "wght" var(--font-weight-normal); margin-bottom: var(--baseline); } .content__nav-image { flex: 1 0 4rem; margin: 0; height: 4rem; } @media all and (min-width: 37.5em) and (max-width: 56.1875em) { .content__nav-image { flex-basis: 6rem; height: 6rem; } } @media all and (min-width: 56.25em) { .content__nav-image { flex-basis: 8rem; height: 8rem; } } .content__nav-image > img { border-radius: calc(var(--border-radius) * 4); display: block; height: 100%; -o-object-fit: cover; object-fit: cover; width: 100%; } .content__related { background: var(--lighter); margin-top: calc(var(--baseline) * 16 + 1vw); padding: calc(var(--baseline) * 12 + 3vw) 0; } .related__title { margin-top: 0; } .content__comments { margin-top: calc(var(--baseline) * 9); overflow: hidden; } .post__image:not(.post__image--wide):not(.post__image--full) { display: inline-block; margin-bottom: calc(var(--baseline) * 2 + 0.25vw); } .post__image a, .post__image img { border-radius: calc(var(--border-radius) * 4); display: inline-block; } .post__image > figcaption { background-color: var(--page-bg); } .post__image--left { float: left; margin-right: 2rem; max-width: 50%; } .post__image--right { float: right; margin-left: 2rem; max-width: 50%; } .post__image--center { display: block; margin-left: auto; margin-right: auto; text-align: center; } .post__image--wide { display: block; } @media all and (min-width: 56.25em) { .post__image--wide { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding: 0 var(--page-margin); text-align: center; } .post__image--wide a, .post__image--wide img { display: block; height: auto; margin: auto; max-width: var(--page-width); width: 100%; } } .post__image--full { background-color: var(--lighter); display: block; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); text-align: center; } .post__image--full a, .post__image--full img { border-radius: 0; display: block; height: auto; width: 100%; } .post__video, .post__iframe { display: block; margin-top: calc(var(--baseline) * 6 + 0.5vw); margin-bottom: calc(var(--baseline) * 6 + 0.5vw); overflow: hidden; padding: 0; position: relative; width: 100%; } .post__video::before, .post__iframe::before { display: block; content: ""; padding-top: var(--embed-aspect-ratio); } .post__video iframe[height*="%"][width*="%"], .post__video video[height*="%"][width*="%"], .post__video iframe[height]:not([height*="%"])[width]:not([width*="%"]), .post__video video[height]:not([height*="%"])[width]:not([width*="%"]), .post__iframe iframe[height*="%"][width*="%"], .post__iframe video[height*="%"][width*="%"], .post__iframe iframe[height]:not([height*="%"])[width]:not([width*="%"]), .post__iframe video[height]:not([height*="%"])[width]:not([width*="%"]) { border: none; height: 100%; left: 0; position: absolute; top: 0; bottom: 0; width: 100%; } .post__video:has(iframe:not([height]))::before, .post__video:has(iframe:not([width]))::before, .post__video:has(video:not([height]))::before, .post__video:has(video:not([width]))::before, .post__iframe:has(iframe:not([height]))::before, .post__iframe:has(iframe:not([width]))::before, .post__iframe:has(video:not([height]))::before, .post__iframe:has(video:not([width]))::before { display: none; } .post__toc { margin-top: calc(var(--baseline) * 6 + 0.5vw); } .post__toc h3 { border-bottom: 1px solid var(--dark); font-size: 1rem; margin: 0; padding-bottom: calc(var(--baseline) * 2 + 0.25vw); } .post__toc ul { counter-reset: item; list-style: decimal; margin: calc(var(--baseline) * 3 + 0.25vw) 0 0 3ch; } .post__toc ul li { counter-increment: item; padding: 0; } .post__toc ul ul { margin-top: 0; } .post__toc ul ul li { display: block; } .post__toc ul ul li:before { content: counters(item, ".") ". "; margin-left: -3ch; } .banner { text-align: center; } .banner--after-content { margin-top: calc(var(--baseline) * 9 + 1vw); } .page__desc a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } @media all and (min-width: 37.5em) { .page--author__wrapper { display: flex; gap: 2rem; } } @media all and (min-width: 56.25em) { .page--author__wrapper { gap: 3rem; } } .page--author__avatar { border-radius: 50%; height: calc(var(--baseline) * 10 + 2vw); margin-top: calc(var(--baseline) * 6 + 1vw); width: calc(var(--baseline) * 10 + 2vw); } .page--author__website { margin-top: calc(var(--baseline) * 4 + 0.25vw); } .page--search form { align-items: flex-start; display: flex; flex-wrap: wrap; } @media all and (max-width: 37.4375em) { .page--search input { margin-bottom: calc(var(--baseline) * 2); } } @media all and (min-width: 20em) { .page--search input { flex: 1 0 auto; margin-right: calc(var(--baseline) * 2); } } @media all and (max-width: 37.4375em) { .page--search button { width: 100%; } } .subpages__title { border-top: 1px solid var(--light); padding-top: calc(var(--baseline) * 6 + 0.5vw); } .subpages__list { list-style: initial; margin-left: 2ch; } .subpages__list ul { list-style: initial; margin: 0 0 0 2ch; } .subpages__list li { padding-bottom: 0; } .readmore { display: inline-block; color: var(--gray); font-size: 0.9374999997rem; font-style: italic; text-decoration: underline; -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } .align-left { text-align: left; } .align-right { text-align: right; } .align-center { text-align: center; } .align-justify { text-align: justify; } .msg { background-color: var(--lighter); border-left: 3px solid var(--light); font-size: 0.9374999997rem; padding: calc(var(--baseline) * 4) calc(var(--baseline) * 6); position: relative; } .msg--highlight { border-left-color: var(--highlight-color); } .msg--info { border-left-color: var(--info-color); } .msg--success { border-left-color: var(--success-color); } .msg--warning { border-left-color: var(--warning-color); } .ordered-list { counter-reset: listCounter; } .ordered-list li { counter-increment: listCounter; list-style: none; padding-left: 0.3rem; position: relative; } .ordered-list li::before { color: var(--color); content: counter(listCounter, decimal-leading-zero) "."; font-variation-settings: "wght" var(--font-weight-bold); left: -2rem; position: absolute; } .dropcap:first-letter { color: var(--headings-color); float: left; font-size: 3.6355864383rem; line-height: 0.7; margin-right: 0.6rem; padding: calc(var(--baseline) * 2) calc(var(--baseline) * 2) calc(var(--baseline) * 2) 0; } .pec-wrapper { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .pec-overlay { align-items: center; background-color: var(--lighter); font-size: 14px; display: none; height: inherit; justify-content: center; line-height: 1.4; padding: 1rem; position: relative; text-align: center; } @media all and (min-width: 37.5em) { .pec-overlay { font-size: 16px; line-height: var(--line-height); padding: 1rem 2rem; } } .pec-overlay.is-active { display: flex; } .pec-overlay-inner p { margin: 0 0 1rem; } .pagination { display: flex; gap: calc(var(--baseline) * 2); justify-content: center; margin-top: calc(var(--baseline) * 12 + 1vw); } @media all and (min-width: 56.25em) { .pagination { margin-top: calc(var(--baseline) * 18 + 1vw); } } /* Footer ------------------------ */ .footer { border-top: 1px solid var(--light); font-size: 0.9374999997rem; padding: calc(var(--baseline) * 9 + 1vw) 0 calc(var(--baseline) * 6 + 1vw); margin: calc(var(--baseline) * 12 + 1vw) auto 0; max-width: var(--page-width); text-align: center; } .footer--glued { border: none; padding-top: 0; } .footer__nav ul { list-style: none; margin: 0; } .footer__nav ul li { display: inline-block; padding: var(--baseline) 0.5rem; } * + .footer__social { margin-top: calc(var(--baseline) * 6 + 0.5vw); } .footer__social svg { fill: var(--dark); height: 1rem; margin: 0 0.5rem; -webkit-transition: all 0.12s linear 0s; transition: all 0.12s linear 0s; width: 1rem; } .footer__social svg:hover { fill: var(--gray); } .footer__copyright { font-size: 0.8239746086rem; margin-top: var(--baseline); } .footer__copyright > *:first-child { margin: 0; } .footer__bttop { background: var(--page-bg); bottom: calc(var(--baseline) * 5); border-radius: 50%; border-color: var(--light); line-height: 1; opacity: 0; padding: calc(var(--baseline) * 2); position: fixed; right: 2rem; text-align: center; width: auto !important; visibility: hidden; z-index: 999; } @media all and (min-width: 56.25em) { .footer__bttop { bottom: calc(var(--baseline) * 10); } } .footer__bttop:hover { border-color: var(--dark); opacity: 1; } .footer__bttop.is-visible { visibility: visible; opacity: 1; } .gallery { margin: calc(var(--baseline) * 6 + 1vw) calc(var(--gallery-gap) * -1); } @media all and (min-width: 20em) { .gallery { display: flex; flex-wrap: wrap; } } @media all and (min-width: 56.25em) { .gallery-wrapper--wide { display: flex; justify-content: center; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding: 0 var(--page-margin); } .gallery-wrapper--wide .gallery { max-width: var(--page-width); } } @media all and (min-width: 56.25em) { .gallery-wrapper--full { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); padding: 0 var(--page-margin); } } @media all and (min-width: 20em) { .gallery[data-columns="1"] .gallery__item { flex: 1 0 100%; } } @media all and (min-width: 30em) { .gallery[data-columns="2"] .gallery__item { flex: 1 0 50%; } } @media all and (min-width: 37.5em) { .gallery[data-columns="3"] .gallery__item { flex: 1 0 33.333%; } } @media all and (min-width: 56.25em) { .gallery[data-columns="4"] .gallery__item { flex: 0 1 25%; } } @media all and (min-width: 56.25em) { .gallery[data-columns="5"] .gallery__item { flex: 0 1 20%; } } @media all and (min-width: 56.25em) { .gallery[data-columns="6"] .gallery__item { flex: 0 1 16.666%; } } @media all and (min-width: 56.25em) { .gallery[data-columns="7"] .gallery__item { flex: 1 0 14.285%; } } @media all and (min-width: 56.25em) { .gallery[data-columns="8"] .gallery__item { flex: 1 0 12.5%; } } .gallery__item { margin: 0; padding: var(--gallery-gap); position: relative; } @media all and (min-width: 20em) { .gallery__item { flex: 1 0 50%; } } @media all and (min-width: 30em) { .gallery__item { flex: 1 0 33.333%; } } @media all and (min-width: 37.5em) { .gallery__item { flex: 1 0 25%; } } .gallery__item a { border-radius: calc(var(--border-radius) * 4); display: block; height: 100%; width: 100%; } .gallery__item a::after { background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0))); background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%); border-radius: inherit; bottom: var(--gallery-gap); content: ""; display: block; opacity: 0; left: var(--gallery-gap); height: calc(100% - var(--gallery-gap) * 2); position: absolute; right: var(--gallery-gap); top: var(--gallery-gap); -webkit-transition: all 0.24s ease-out; transition: all 0.24s ease-out; width: calc(100% - var(--gallery-gap) * 2); } .gallery__item a:hover::after { opacity: 1; } .gallery__item img { border-radius: inherit; display: block; height: 100%; -o-object-fit: cover; object-fit: cover; width: 100%; } .gallery__item figcaption { bottom: 1.2rem; color: var(--white); left: 50%; opacity: 0; position: absolute; text-align: center; -webkit-transform: translate(-50%, 1.2rem); transform: translate(-50%, 1.2rem); -webkit-transition: all 0.24s ease-out; transition: all 0.24s ease-out; } .gallery__item:hover figcaption { opacity: 1; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }