/* normalize html */
html {
box-sizing: border-box;
font-size: 6.69vw;
background-color: var(--cream);
}
@media screen and (max-width: 768px) and (orientation: portrait) {
html {
font-size: 31.25vw;
}
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
margin: 0;
padding: 0;
font-weight: normal;
}
ol,
ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
html {
background-color: #FFF;
}
/* Variables */
:root {
--red: #E02235;
--blue: #C5D9E7;
--black-30: rgba(0, 0, 0, 0.3);
--gray: #424345;
--gray-medium: #A5A5A5;
--dark-gray: #737373;
--cream: #ECE7DD;
--transition-timing : cubic-bezier(.55,.06,.28,.97);
--transition-regular : 0.3s var(--transition-timing);
}
/* Fonts */
@font-face {
font-display: swap;
font-family: 'Tiempos';
font-style: normal;
font-weight: 400;
src: url('../fonts/tiempos/Tiempos-Regular.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Tiempos';
font-style: normal;
font-weight: 700;
src: url('../fonts/tiempos/Tiempos-Bold.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('../fonts/open_sans/OpenSans-Regular.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: url('../fonts/open_sans/OpenSans-SemiBold.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: url('../fonts/open_sans/OpenSans-Bold.woff2') format('woff2');
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "liga" 1;
font-smoothing: antialiased;
font-family: "Open Sans", sans-serif;
font-size: 0.24rem;
line-height: 1.8em;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #000;
}
/* Image with 'data' attribute is hidden */
img[data-lazy-src] {
/* we set the opacity to 0 */
opacity: 0;
}
/* Image without 'data' attribute is (or becomes) visible */
img.lazyloaded {
/* prepare the future animation */
-webkit-transition: opacity 0.5s linear 0.2s;
-moz-transition: opacity 0.5s linear 0.2s;
transition: opacity 0.5s linear 0.2s;
/* we set the opacity to 1 to do the magic */
opacity: 1;
}
/* Typography */
.text-white{
color: #FFF;
}
.text-black{
color: #000;
}
.text-red{
color: var(--red);
}
h1, .h1{
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: .64rem;
line-height: .96;
letter-spacing: -.07em;
text-transform: uppercase;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
h1, .h1{
font-size: .24rem;
}
}
h2, .h2{
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: .32rem;
line-height: 1.2;
letter-spacing: -.05em;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
h2, .h2{
font-size: .18rem;
}
}
h3, .h3{
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: .24rem;
line-height: .3rem;
letter-spacing: -.03em;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
h3, .h3{
font-size: .14rem;
}
}
.extra-large-title, .extra-large-title > *{
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 1.12rem !important;
line-height: .86 !important;
letter-spacing: -.07em !important;
text-transform: uppercase;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.extra-large-title, .extra-large-title > *{
font-size: .4rem !important;
line-height: .38rem !important;
letter-spacing: -.03em !important;
}
}
p a{
color: var(--red);
text-decoration: underline;
}
p, ul li{
font-family: 'Tiempos', sans-serif;
font-weight: 400;
font-size: .18rem;
line-height: 1.6;
letter-spacing: -.02em;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
p, ul li{
font-size: .12rem;
}
}
:is(.big-first-letter:is(p,ul li),:is(p,ul li) .big-first-letter):first-letter{
float: left;
font-size: calc(0.18rem * 1.6 * 2);
margin-top: calc(0.18rem * 1.6 - 0.18rem);
margin-right: .04rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.big-first-letter:is(p,ul li),:is(p,ul li) .big-first-letter):first-letter{
font-size: calc(0.12rem * 1.6 * 2);
margin-top: calc(0.12rem * 1.6 - 0.12rem);
}
}
:is(.endbug:is(p,ul li),:is(p,ul li) .endbug)::after{
content: '';
display: inline-block;
background-image: url('../svg/endbug.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
aspect-ratio: 16 / 24;
height: 0.18rem;
margin-left: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.endbug:is(p,ul li),:is(p,ul li) .endbug)::after{
height: 0.12rem;
}
}
.p1{
font-family: 'Tiempos', sans-serif;
font-weight: 400;
font-size: .16rem;
line-height: 1.6;
letter-spacing: -.02em;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.p1{
font-size: .12rem;
}
}
.p1 .open-sans{
font-family: 'Open Sans', sans-serif;
}
:is(.p1.big-first-letter,.p1 .big-first-letter):first-letter{
float: left;
font-size: calc(0.16rem * 1.6 * 2);
margin-top: calc(0.16rem * 1.6 - 0.16rem);
margin-right: .04rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.p1.big-first-letter,.p1 .big-first-letter):first-letter{
height: calc(0.12rem * 1.6);
margin-left: .08rem;
display: inline-block;
aspect-ratio: 16 / 24;
}
}
:is(.p1.endbug,.p1 .endbug)::after{
content: '';
display: inline-block;
background-image: url('../svg/endbug.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
aspect-ratio: 16 / 24;
height: 0.16rem;
margin-left: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.p1.endbug,.p1 .endbug)::after{
height: 0.12rem;
}
}
.p2{
font-family: 'Tiempos', sans-serif;
font-weight: 400;
font-size: .18rem;
line-height: 1.3;
letter-spacing: -.02em;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.p2{
font-size: .14rem;
}
}
.p2 .open-sans{
font-family: 'Open Sans', sans-serif;
}
:is(.p2.big-first-letter,.p2 .big-first-letter):first-letter{
float: left;
font-size: calc(0.18rem * 1.3 * 2);
margin-top: calc(0.18rem * 1.3 - 0.18rem);
margin-right: .04rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.p2.big-first-letter,.p2 .big-first-letter{
font-size: calc(0.14rem * 1.3 * 2);
margin-top: calc(0.14rem * 1.3 - 0.14rem);
}
}
:is(.p2.endbug,.p2 .endbug)::after{
content: '';
display: inline-block;
background-image: url('../svg/endbug.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
aspect-ratio: 16 / 24;
height: 0.18rem;
margin-left: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.p2.endbug,.p2 .endbug)::after{
height: 0.14rem;
}
}
.p3{
font-family: 'Tiempos', sans-serif;
font-weight: 400;
font-size: .2rem;
line-height: .26rem;
letter-spacing: -.01em;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.p3{
font-size: .16rem;
line-height: .2;
}
}
.p3 .open-sans{
font-family: 'Open Sans', sans-serif;
}
:is(.p3.big-first-letter,.p3 .big-first-letter):first-letter{
float: left;
font-size: calc(0.26rem * 2);
margin-top: calc(.26rem - 0.2rem);
margin-right: .04rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.p3.big-first-letter,.p3 .big-first-letter{
font-size: calc(.2rem * 2);
margin-top: calc(.2rem - 0.16rem);
}
}
:is(.p3.endbug,.p3 .endbug)::after{
content: '';
display: inline-block;
background-image: url('../svg/endbug.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
aspect-ratio: 16 / 24;
height: 0.2rem;
margin-left: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.p3.endbug,.p3 .endbug)::after{
height: 0.16rem;
}
}
.p4{
font-family: 'Tiempos', sans-serif;
font-size: .24rem;
line-height: 1.3;
letter-spacing: -.02em;
font-weight: 400;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.p4{
font-size: .18rem;
}
}
.p4 .open-sans{
font-family: 'Open Sans', sans-serif;
}
:is(.p4.big-first-letter,.p4 .big-first-letter):first-letter{
float: left;
font-size: calc(0.24rem * 1.3 * 2);
margin-top: calc(0.24rem * 1.3 - 0.24rem);
margin-right: .04rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.p4.big-first-letter,.p4 .big-first-letter):first-letter{
font-size: calc(0.18rem * 1.3 * 2);
margin-top: calc(0.18rem * 1.3 - 0.18rem);
}
}
:is(.p4.endbug,.p4 .endbug)::after{
content: '';
display: inline-block;
background-image: url('../svg/endbug.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
aspect-ratio: 16 / 24;
height: 0.24rem;
margin-left: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.p4.endbug,.p4 .endbug)::after{
height: 0.18rem;
}
}
.p5, .p5 p{
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: .48rem;
line-height: .54rem;
letter-spacing: -.05em;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.p5, .p5 p{
font-size: .32rem;
line-height: .4rem;
}
}
:is(.p5,.p5 p) .open-sans{
font-family: 'Open Sans', sans-serif;
}
:is(.big-first-letter:is(.p5,.p5 p),:is(.p5,.p5 p) .big-first-letter):first-letter{
float: left;
font-size: calc(0.48rem * 1.6 * 2);
margin-top: calc(0.48rem * 1.6 - 0.48rem);
margin-right: .04rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.big-first-letter:is(.p5,.p5 p),:is(.p5,.p5 p) .big-first-letter):first-letter{
font-size: calc(0.32rem * 1.6 * 2);
margin-top: calc(0.32rem * 1.6 - 0.32rem);
}
}
:is(.endbug:is(.p5,.p5 p),:is(.p5,.p5 p) .endbug)::after{
content: '';
display: inline-block;
background-image: url('../svg/endbug.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
aspect-ratio: 16 / 24;
height: 0.48rem;
margin-left: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.endbug:is(.p5,.p5 p),:is(.p5,.p5 p) .endbug)::after{
height: 0.32rem;
}
}
/* Open Sans paragraph variants (os-p1…os-p4 = no substring match with p1…p4 in TinyMCE) */
.os-p1{
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: .16rem;
line-height: 1.6;
letter-spacing: -.02em;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.os-p1{
font-size: .12rem;
}
}
:is(.os-p1.big-first-letter,.os-p1 .big-first-letter):first-letter{
float: left;
font-size: calc(0.16rem * 1.6 * 2);
margin-top: calc(0.16rem * 1.6 - 0.16rem);
margin-right: .04rem;
}
:is(.os-p1.endbug,.os-p1 .endbug)::after{
content: '';
display: inline-block;
background-image: url('../svg/endbug.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
aspect-ratio: 16 / 24;
height: 0.16rem;
margin-left: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.os-p1.endbug,.os-p1 .endbug)::after{
height: 0.12rem;
}
}
.os-p2{
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: .18rem;
line-height: 1.3;
letter-spacing: -.02em;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.os-p2{
font-size: .14rem;
}
}
:is(.os-p2.big-first-letter,.os-p2 .big-first-letter):first-letter{
float: left;
font-size: calc(0.18rem * 1.3 * 2);
margin-top: calc(0.18rem * 1.3 - 0.18rem);
margin-right: .04rem;
}
:is(.os-p2.endbug,.os-p2 .endbug)::after{
content: '';
display: inline-block;
background-image: url('../svg/endbug.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
aspect-ratio: 16 / 24;
height: 0.18rem;
margin-left: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.os-p2.endbug,.os-p2 .endbug)::after{
height: 0.14rem;
}
}
.os-p3{
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: .2rem;
line-height: .26rem;
letter-spacing: -.01em;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.os-p3{
font-size: .16rem;
line-height: .2;
}
}
.os-p3 .open-sans{
font-family: 'Open Sans', sans-serif;
}
:is(.os-p3.big-first-letter,.os-p3 .big-first-letter):first-letter{
float: left;
font-size: calc(0.26rem * 2);
margin-top: calc(.26rem - 0.2rem);
margin-right: .04rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.os-p3.big-first-letter,.os-p3 .big-first-letter{
font-size: calc(.2rem * 2);
margin-top: calc(.2rem - 0.16rem);
}
}
:is(.os-p3.endbug,.os-p3 .endbug)::after{
content: '';
display: inline-block;
background-image: url('../svg/endbug.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
aspect-ratio: 16 / 24;
height: 0.2rem;
margin-left: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.os-p3.endbug,.os-p3 .endbug)::after{
height: 0.16rem;
}
}
.os-p4{
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: .24rem;
line-height: 1.3;
letter-spacing: -.02em;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.os-p4{
font-size: .18rem;
}
}
:is(.os-p4.big-first-letter,.os-p4 .big-first-letter):first-letter{
float: left;
font-size: calc(0.24rem * 1.3 * 2);
margin-top: calc(0.24rem * 1.3 - 0.24rem);
margin-right: .04rem;
}
:is(.os-p4.endbug,.os-p4 .endbug)::after{
content: '';
display: inline-block;
background-image: url('../svg/endbug.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
aspect-ratio: 16 / 24;
height: 0.24rem;
margin-left: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.os-p4.endbug,.os-p4 .endbug)::after{
height: 0.18rem;
}
}
.os-p5{
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: .48rem;
line-height: .54rem;
letter-spacing: -.05em;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.os-p5{
font-size: .32rem;
line-height: .4rem;
}
}
:is(.os-p5.big-first-letter,.os-p5 .big-first-letter):first-letter{
float: left;
font-size: calc(0.48rem * 1.6 * 2);
margin-top: calc(0.48rem * 1.6 - 0.48rem);
margin-right: .04rem;
}
:is(.os-p5.endbug,.os-p5 .endbug)::after{
content: '';
display: inline-block;
background-image: url('../svg/endbug.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
aspect-ratio: 16 / 24;
height: 0.32rem;
margin-left: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.os-p5.endbug,.os-p5 .endbug)::after{
height: 0.24rem;
}
}
.rich-text-content > * + *{
margin-top: .24rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.rich-text-content > * + *{
margin-top: .18rem;
}
}
.rich-text-content a{
color: var(--red);
text-decoration: underline;
}
span.big-first-letter{
display: block;
}
:is(span.big-first-letter p):first-letter{
float: left;
font-size: calc(0.18rem * 1.6 * 2);
margin-top: calc(0.18rem * 1.6 - 0.18rem);
margin-right: .04rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(span.big-first-letter p):first-letter{
font-size: calc(0.12rem * 1.6 * 2);
margin-top: calc(0.12rem * 1.6 - 0.12rem);
}
}
:is(span.big-first-letter .p1,span.big-first-letter .os-p1):first-letter{
float: left;
font-size: calc(0.16rem * 1.6 * 2);
margin-top: calc(0.16rem * 1.6 - 0.16rem);
margin-right: .04rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(span.big-first-letter .p1,span.big-first-letter .os-p1):first-letter{
font-size: calc(0.12rem * 1.6 * 2);
margin-top: calc(0.12rem * 1.6 - 0.12rem);
}
}
:is(span.big-first-letter .p2,span.big-first-letter .os-p2):first-letter{
float: left;
font-size: calc(0.18rem * 1.3 * 2);
margin-top: calc(0.18rem * 1.3 - 0.18rem);
margin-right: .04rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(span.big-first-letter .p2,span.big-first-letter .os-p2):first-letter{
font-size: calc(0.14rem * 1.3 * 2);
margin-top: calc(0.14rem * 1.3 - 0.14rem);
}
}
:is(span.big-first-letter .p3,span.big-first-letter .os-p3):first-letter{
float: left;
font-size: calc(0.26rem * 2);
margin-top: calc(.26rem - 0.2rem);
margin-right: .04rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(span.big-first-letter .p3,span.big-first-letter .os-p3):first-letter{
font-size: calc(.2rem * 2);
margin-top: calc(.2rem - 0.16rem);
}
}
.big-first-letter:is(span.big-first-letter .p4,span.big-first-letter .os-p4):first-letter{
float: left;
font-size: calc(0.24rem * 1.3 * 2);
margin-top: calc(0.24rem * 1.3 - 0.24rem);
margin-right: .04rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.big-first-letter:is(span.big-first-letter .p4,span.big-first-letter .os-p4):first-letter{
font-size: calc(0.18rem * 1.3 * 2);
margin-top: calc(0.18rem * 1.3 - 0.18rem);
}
}
.big-first-letter:is(span.big-first-letter .p5,span.big-first-letter .os-p5):first-letter{
float: left;
font-size: calc(0.48rem * 1.6 * 2);
margin-top: calc(0.48rem * 1.6 - 0.48rem);
margin-right: .04rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.big-first-letter:is(span.big-first-letter .p5,span.big-first-letter .os-p5):first-letter{
font-size: calc(0.32rem * 1.6 * 2);
margin-top: calc(0.32rem * 1.6 - 0.32rem);
}
}
:is(span.endbug p)::after{
content: '';
display: inline-block;
background-image: url('../svg/endbug.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
aspect-ratio: 16 / 24;
height: 0.18rem;
margin-left: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(span.endbug p)::after{
height: 0.12rem;
}
}
:is(span.endbug .p1,span.endbug .os-p1)::after{
content: '';
display: inline-block;
background-image: url('../svg/endbug.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
aspect-ratio: 16 / 24;
height: 0.16rem;
margin-left: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(span.endbug .p1,span.endbug .os-p1)::after{
height: 0.12rem;
}
}
:is(span.endbug .p2,span.endbug .os-p2)::after{
content: '';
display: inline-block;
background-image: url('../svg/endbug.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
aspect-ratio: 16 / 24;
height: 0.18rem;
margin-left: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(span.endbug .p2,span.endbug .os-p2)::after{
height: 0.14rem;
}
}
:is(span.endbug .p3,span.endbug .os-p3)::after{
content: '';
display: inline-block;
background-image: url('../svg/endbug.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
aspect-ratio: 16 / 24;
height: 0.2rem;
margin-left: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(span.endbug .p3,span.endbug .os-p3)::after{
height: 0.16rem;
}
}
:is(span.endbug .p4,span.endbug .os-p4)::after{
content: '';
display: inline-block;
background-image: url('../svg/endbug.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
aspect-ratio: 16 / 24;
height: 0.24rem;
margin-left: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(span.endbug .p4,span.endbug .os-p4)::after{
height: 0.18rem;
}
}
:is(span.endbug .p5,span.endbug .os-p5)::after{
content: '';
display: inline-block;
background-image: url('../svg/endbug.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom center;
aspect-ratio: 16 / 24;
height: 0.48rem;
margin-left: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(span.endbug .p5,span.endbug .os-p5)::after{
height: 0.32rem;
}
}
.card-info{
font-family: 'Tiempos', sans-serif;
font-weight: 400;
font-size: .12rem;
line-height: 1;
letter-spacing: -.01em;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.card-info{
font-size: .1rem;
}
}
.caption{
font-family: 'Tiempos', sans-serif;
font-weight: 400;
font-size: .14rem;
line-height: 1.34;
letter-spacing: -.02em;
color: var(--gray);
padding: 0 .6rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.caption{
font-size: .1rem;
padding: 0 .32rem;
}
}
ul li{
padding-left: .92rem;
position: relative;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
ul li{
padding-left: .32rem;
}
}
:is(ul li)::before{
content: '';
position: absolute;
left: .56rem;
top: .095rem;
width: .1rem;
height: .1rem;
background-color: var(--red);
border-radius: 50%;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(ul li)::before{
left: .1rem;
width: .06rem;
height: .06rem;
top: .085rem;
}
}
blockquote{
margin: 0;
}
:is(blockquote p)::before{
content: '‘‘';
margin-right: .04rem;
}
:is(blockquote p)::after{
content: '’’';
margin-left: .04rem;
}
/* Layout */
[class|="container"]{
width: 100%;
margin: 0 auto;
padding: 0 .16rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
[class|="container"]{
padding: 0 .1rem;
}
}
.px-0[class|="container"]{
padding-left: 0;
padding-right: 0;
}
.container-1{
max-width: 13.12rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.container-1{
max-width: 100%;
}
}
.container-2{
max-width: 10.96rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.container-2{
max-width: 100%;
}
}
.container-3{
max-width: 8.78rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.container-3{
max-width: 100%;
}
}
.container-4{
max-width: 7.7rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.container-4{
max-width: 100%;
}
}
section + section{
margin-top: .64rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section + section{
margin-top: .32rem;
}
}
/* Components */
.category-card{
background-color: var(--blue);
height: 100%;
position: relative;
}
.category-card > a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
}
.category-card .card-header{
position: relative;
}
:is(.category-card .card-header) .image{
width: 100%;
height: 2.06rem;
}
:is(:is(.category-card .card-header) .image) img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
:is(.category-card .card-header) .category{
position: absolute;
top: .16rem;
right: .16rem;
background-color: #000;
border-radius: .04rem;
color: #fff;
font-size: .12rem;
line-height: .86;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
letter-spacing: -.03em;
padding: .06rem .1rem;
}
.category-card .card-body{
padding: .2rem;
}
:is(.category-card .card-body) .info{
display: flex;
font-size: .12rem;
line-height: 1;
font-family: 'Tiempos', sans-serif;
font-weight: 400;
letter-spacing: -0.01em;
}
:is(.category-card .card-body) .title{
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: .24rem;
line-height: .30rem;
letter-spacing: -.03em;
margin-top: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.category-card .card-body) .title{
font-size: .18rem;
line-height: .22rem;
}
}
:is(.category-card .card-body) .excerpt{
font-family: 'Tiempos', sans-serif;
font-weight: 400;
font-size: .16rem;
line-height: 1.4;
letter-spacing: -0.02em;
margin-top: .2rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.category-card .card-body) .excerpt{
font-size: .12rem;
}
}
/* Intro Section */
section.intro-section .category{
background-color: #000;
border-radius: .04rem;
color: #fff;
font-size: .12rem;
line-height: .86;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
letter-spacing: -.03em;
padding: .06rem .1rem;
width: fit-content;
margin: 0 auto;
position: relative;
}
:is(section.intro-section .featuring,section.intro-section .intro-text) a{
position: relative;
text-decoration: none;
display: inline-block;
}
:is(:is(section.intro-section .featuring,section.intro-section .intro-text) a)::after{
content: '';
position: absolute;
top: 100%;
right: 0;
width: 100%;
height: 1px;
background-color: currentColor;
transition: var(--transition-regular);
}
:is(:is(section.intro-section .featuring,section.intro-section .intro-text) a)::before{
content: '';
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 1px;
background-color: currentColor;
transition: var(--transition-regular);
transition-delay: 0.1s;
}
:is(:is(section.intro-section .featuring,section.intro-section .intro-text) a):hover::after{
width: 0;
}
:is(:is(section.intro-section .featuring,section.intro-section .intro-text) a):hover::before{
width: 100%;
}
:is(:is(section.intro-section .featuring,section.intro-section .intro-text) .text-red a,:is(section.intro-section .featuring,section.intro-section .intro-text) a.text-red,:is(section.intro-section .featuring,section.intro-section .intro-text) a:has(.text-red))::after,:is(:is(section.intro-section .featuring,section.intro-section .intro-text) .text-red a,:is(section.intro-section .featuring,section.intro-section .intro-text) a.text-red,:is(section.intro-section .featuring,section.intro-section .intro-text) a:has(.text-red))::before{
background-color: red;
}
:is(:is(section.intro-section .featuring,section.intro-section .intro-text) .text-white a,:is(section.intro-section .featuring,section.intro-section .intro-text) a.text-white,:is(section.intro-section .featuring,section.intro-section .intro-text) a:has(.text-white))::after,:is(:is(section.intro-section .featuring,section.intro-section .intro-text) .text-white a,:is(section.intro-section .featuring,section.intro-section .intro-text) a.text-white,:is(section.intro-section .featuring,section.intro-section .intro-text) a:has(.text-white))::before{
background-color: #fff;
}
:is(:is(section.intro-section .featuring,section.intro-section .intro-text) .text-black a,:is(section.intro-section .featuring,section.intro-section .intro-text) a.text-black,:is(section.intro-section .featuring,section.intro-section .intro-text) a:has(.text-black))::after,:is(:is(section.intro-section .featuring,section.intro-section .intro-text) .text-black a,:is(section.intro-section .featuring,section.intro-section .intro-text) a.text-black,:is(section.intro-section .featuring,section.intro-section .intro-text) a:has(.text-black))::before{
background-color: #000;
}
section.intro-section.style_1 .category{
margin-bottom: .24rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.intro-section.style_1 .category{
margin-bottom: .12rem;
}
}
:is(section.intro-section.style_1.box-overlay .featured-image)::after{
display: none;
}
:is(section.intro-section.style_1.box-overlay .featured-image) .title-and-text{
background-color: rgba(0, 0, 0, .7);
}
section.intro-section.style_1 .featured-image{
width: 100%;
aspect-ratio: 140 / 75;
position: relative;
line-height: 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.intro-section.style_1 .featured-image{
aspect-ratio: 75 / 55;
}
}
:is(section.intro-section.style_1 .featured-image)::after{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .4) 80%, rgba(0, 0, 0, .8) 100%);
}
:is(section.intro-section.style_1 .featured-image) img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
:is(section.intro-section.style_1 .featured-image) .title-and-text{
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
padding: .64rem 0;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.intro-section.style_1 .featured-image) .title-and-text{
padding: .2rem 0;
}
}
:is(:is(section.intro-section.style_1 .featured-image) .title-and-text) .featuring{
color: var(--blue);
margin-top: .24rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.intro-section.style_1 .featured-image) .title-and-text) .featuring{
margin-top: .12rem;
}
}
:is(section.intro-section.style_1 .featured-image) .date-and-credit{
position: absolute;
z-index: 2;
bottom: 0;
right: 0;
padding: .32rem;
color: #fff;
display: flex;
gap: .08rem;
font-family: 'Tiempos', sans-serif;
font-weight: 400;
font-size: .14rem;
line-height: 0.86;
letter-spacing: -0.02em;
color: var(--gray-medium);
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.intro-section.style_1 .featured-image) .date-and-credit{
font-size: .1rem;
line-height: 0.6;
padding: .1rem;
}
}
:is(:is(section.intro-section.style_1 .featured-image) .date-and-credit) .credit-name{
font-weight: 700;
color: #fff;
}
section.intro-section.style_1 .intro-content{
margin-top: .64rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.intro-section.style_1 .intro-content{
margin-top: .24rem;
}
}
:is(section.intro-section.style_1 .intro-content) .featuring{
margin-top: .24rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.intro-section.style_1 .intro-content) .featuring{
margin-top: .16rem;
}
}
:is(section.intro-section.style_1 .intro-content):has(.date-and-credit){
margin-top: .4rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.intro-section.style_1 .intro-content):has(.date-and-credit){
margin-top: .2rem;
}
}
:is(section.intro-section.style_1 .intro-content) .date-and-credit{
padding: 0 .32rem;
display: flex;
gap: .08rem;
font-family: 'Tiempos', sans-serif;
font-weight: 400;
font-size: .14rem;
line-height: 0.86;
letter-spacing: -0.02em;
color: var(--gray);
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.intro-section.style_1 .intro-content) .date-and-credit{
font-size: .1rem;
line-height: 0.6;
padding: 0 .1rem;
}
}
:is(:is(section.intro-section.style_1 .intro-content) .date-and-credit) .credit-name{
font-weight: 700;
color: #000;
}
:is(section.intro-section.style_1 .intro-content) .author-info{
display: flex;
gap: .2rem;
align-items: center;
justify-content: center;
margin-top: .24rem;
text-align: start;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.intro-section.style_1 .intro-content) .author-info{
gap: .12rem;
margin-top: .16rem;
}
}
:is(:is(section.intro-section.style_1 .intro-content) .author-info) .author-image{
width: .5rem;
height: .5rem;
flex-shrink: 0;
border-radius: 50%;
overflow: hidden;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.intro-section.style_1 .intro-content) .author-info) .author-image{
width: .4rem;
height: .4rem;
}
}
:is(:is(:is(section.intro-section.style_1 .intro-content) .author-info) .author-image) img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
:is(:is(section.intro-section.style_1 .intro-content) .author-info) .author-name{
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: .18rem;
line-height: .86;
letter-spacing: -0.03em;
color: inherit;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.intro-section.style_1 .intro-content) .author-info) .author-name{
font-size: .12rem;
}
}
:is(:is(section.intro-section.style_1 .intro-content) .author-info) .author-info-content{
display: flex;
flex-direction: column;
gap: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.intro-section.style_1 .intro-content) .author-info) .author-info-content{
gap: .04rem;
}
}
:is(:is(section.intro-section.style_1 .intro-content) .author-info) .author-title{
font-family: 'Tiempos', sans-serif;
font-weight: 400;
font-size: .16rem;
line-height: 1.34;
letter-spacing: -0.02em;
color: inherit;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.intro-section.style_1 .intro-content) .author-info) .author-title{
font-size: .12rem;
}
}
:is(section.intro-section.style_1 .intro-content) .share-cta{
width: 100%;
margin-top: .4rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.intro-section.style_1 .intro-content) .share-cta{
margin-top: .2rem;
}
}
:is(:is(section.intro-section.style_1 .intro-content) .share-cta) .author-info{
display: flex;
gap: .28rem;
align-items: center;
margin-top: 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.intro-section.style_1 .intro-content) .share-cta) .author-info{
gap: .16rem;
flex-direction: column;
text-align: center;
}
}
:is(:is(:is(section.intro-section.style_1 .intro-content) .share-cta) .author-info) .author-image{
width: .8rem;
height: .8rem;
flex-shrink: 0;
border-radius: 50%;
overflow: hidden;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(section.intro-section.style_1 .intro-content) .share-cta) .author-info) .author-image{
width: .62rem;
height: .62rem;
}
}
:is(:is(:is(:is(section.intro-section.style_1 .intro-content) .share-cta) .author-info) .author-image) img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
:is(:is(:is(section.intro-section.style_1 .intro-content) .share-cta) .author-info) .author-name{
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: .24rem;
line-height: .86;
letter-spacing: -0.01em;
color: inherit;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(section.intro-section.style_1 .intro-content) .share-cta) .author-info) .author-name{
font-size: .16rem;
}
}
:is(:is(:is(section.intro-section.style_1 .intro-content) .share-cta) .author-info) .author-info-content{
display: flex;
flex-direction: column;
gap: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(section.intro-section.style_1 .intro-content) .share-cta) .author-info) .author-info-content{
gap: .04rem;
}
}
:is(:is(:is(section.intro-section.style_1 .intro-content) .share-cta) .author-info) .author-title{
font-family: 'Tiempos', sans-serif;
font-weight: 400;
font-size: .16rem;
line-height: 1.34;
letter-spacing: -0.02em;
color: inherit;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(section.intro-section.style_1 .intro-content) .share-cta) .author-info) .author-title{
font-size: .12rem;
}
}
section.intro-section.style_2 .category{
margin: 0;
margin-bottom: .24rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.intro-section.style_2 .category{
margin-bottom: .12rem;
}
}
section.intro-section.style_2.half .featured-image{
width: 50%;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.intro-section.style_2.half .featured-image{
width: 100%;
}
}
section.intro-section.style_2.space-between .intro-content{
justify-content: space-between;
}
section.intro-section.style_2 .intro-image-and-content{
width: 100%;
background-color: #000;
display: flex;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.intro-section.style_2 .intro-image-and-content{
flex-direction: column;
}
}
section.intro-section.style_2 .featured-image{
width: 5.5rem;
height: 6.8rem;
flex-shrink: 0;
position: relative;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.intro-section.style_2 .featured-image{
width: 100%;
height: 4.4rem;
}
}
:is(section.intro-section.style_2 .featured-image) img{
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}
:is(section.intro-section.style_2 .featured-image)::after{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .4) 80%, rgba(0, 0, 0, .8) 100%);
}
:is(section.intro-section.style_2 .featured-image) .date-and-credit{
position: absolute;
z-index: 2;
bottom: 0;
right: 0;
padding: .32rem;
color: #fff;
display: flex;
gap: .08rem;
font-family: 'Tiempos', sans-serif;
font-weight: 400;
font-size: .14rem;
line-height: 0.86;
letter-spacing: -0.02em;
color: var(--gray-medium);
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.intro-section.style_2 .featured-image) .date-and-credit{
font-size: .1rem;
line-height: 0.6;
padding: .1rem;
}
}
:is(:is(section.intro-section.style_2 .featured-image) .date-and-credit) .credit-name{
font-weight: 700;
color: #fff;
}
section.intro-section.style_2 .intro-content{
color: #fff;
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
gap: .64rem;
padding: .32rem .2rem;
}
:is(section.intro-section.style_2 .intro-content) h1{
padding-right: .64rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.intro-section.style_2 .intro-content) h1{
padding-right: 0;
}
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.intro-section.style_2 .intro-content{
gap: .2rem;
padding: .24rem .1rem;
}
}
:is(section.intro-section.style_2 .intro-content) .featuring{
color: var(--blue);
margin-top: .24rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.intro-section.style_2 .intro-content) .featuring{
margin-top: .12rem;
}
}
:is(section.intro-section.style_2 .intro-content) .share-cta{
width: 100%;
}
:is(section.intro-section.style_2 .intro-content) .author-info{
display: flex;
gap: .2rem;
align-items: center;
justify-content: center;
margin-top: .24rem;
text-align: start;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.intro-section.style_2 .intro-content) .author-info{
gap: .12rem;
margin-top: .16rem;
}
}
:is(:is(section.intro-section.style_2 .intro-content) .author-info) .author-image{
width: .5rem;
height: .5rem;
flex-shrink: 0;
border-radius: 50%;
overflow: hidden;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.intro-section.style_2 .intro-content) .author-info) .author-image{
width: .4rem;
height: .4rem;
}
}
:is(:is(:is(section.intro-section.style_2 .intro-content) .author-info) .author-image) img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
:is(:is(section.intro-section.style_2 .intro-content) .author-info) .author-name{
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: .18rem;
line-height: .86;
letter-spacing: -0.03em;
color: inherit;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.intro-section.style_2 .intro-content) .author-info) .author-name{
font-size: .12rem;
}
}
:is(:is(section.intro-section.style_2 .intro-content) .author-info) .author-info-content{
display: flex;
flex-direction: column;
gap: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.intro-section.style_2 .intro-content) .author-info) .author-info-content{
gap: .04rem;
}
}
:is(:is(section.intro-section.style_2 .intro-content) .author-info) .author-title{
font-family: 'Tiempos', sans-serif;
font-weight: 400;
font-size: .16rem;
line-height: 1.34;
letter-spacing: -0.02em;
color: inherit;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.intro-section.style_2 .intro-content) .author-info) .author-title{
font-size: .12rem;
}
}
:is(section.intro-section.style_2 .intro-content) .share-cta{
width: 100%;
margin-top: .4rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.intro-section.style_2 .intro-content) .share-cta{
margin-top: .2rem;
}
}
:is(:is(section.intro-section.style_2 .intro-content) .share-cta) .author-info{
display: flex;
gap: .28rem;
align-items: center;
margin-top: 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.intro-section.style_2 .intro-content) .share-cta) .author-info{
gap: .16rem;
flex-direction: column;
text-align: center;
}
}
:is(:is(:is(section.intro-section.style_2 .intro-content) .share-cta) .author-info) .author-image{
width: .8rem;
height: .8rem;
flex-shrink: 0;
border-radius: 50%;
overflow: hidden;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(section.intro-section.style_2 .intro-content) .share-cta) .author-info) .author-image{
width: .62rem;
height: .62rem;
}
}
:is(:is(:is(:is(section.intro-section.style_2 .intro-content) .share-cta) .author-info) .author-image) img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
:is(:is(:is(section.intro-section.style_2 .intro-content) .share-cta) .author-info) .author-name{
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: .24rem;
line-height: .86;
letter-spacing: -0.01em;
color: inherit;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(section.intro-section.style_2 .intro-content) .share-cta) .author-info) .author-name{
font-size: .16rem;
}
}
:is(:is(:is(section.intro-section.style_2 .intro-content) .share-cta) .author-info) .author-info-content{
display: flex;
flex-direction: column;
gap: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(section.intro-section.style_2 .intro-content) .share-cta) .author-info) .author-info-content{
gap: .04rem;
}
}
:is(:is(:is(section.intro-section.style_2 .intro-content) .share-cta) .author-info) .author-title{
font-family: 'Tiempos', sans-serif;
font-weight: 400;
font-size: .16rem;
line-height: 1.34;
letter-spacing: -0.02em;
color: inherit;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(section.intro-section.style_2 .intro-content) .share-cta) .author-info) .author-title{
font-size: .12rem;
}
}
section.intro-section.style_3 .category{
margin: .24rem auto .16rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.intro-section.style_3 .category{
margin: .12rem auto .08rem;
}
}
section.intro-section.style_3 h1{
font-size: .72rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.intro-section.style_3 h1{
font-size: .36rem;
}
}
section.intro-section.style_3 .intro-text{
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: .26rem;
line-height: .86;
letter-spacing: -0.02em;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.intro-section.style_3 .intro-text{
font-size: .12rem;
}
}
.on_image:is(section.intro-section.style_3 .intro-text){
color: #000 !important;
text-align: center;
font-size: .18rem;
margin-top: -.08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.on_image:is(section.intro-section.style_3 .intro-text){
font-size: .1rem;
margin-top: -.16rem;
}
}
.on_image_top_left:is(section.intro-section.style_3 .intro-text){
position: absolute;
top: 0;
left: 0;
padding: .16rem;
color: #000 !important;
max-width: 50%;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.on_image_top_left:is(section.intro-section.style_3 .intro-text){
top: .32rem;
max-width: 80%;
}
}
:is(section.intro-section.style_3 .intro-text) + .author-info{
margin-top: .24rem;
}
section.intro-section.style_3 .over-image{
text-align: center;
padding-top: .32rem;
padding-bottom: .24rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.intro-section.style_3 .over-image{
padding-top: .24rem;
padding-bottom: .16rem;
}
}
section.intro-section.style_3 .featured-image{
position: relative;
width: 100%;
height: 6.8rem;
line-height: 1;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.intro-section.style_3 .featured-image{
height: 4.8rem;
}
}
:is(section.intro-section.style_3 .featured-image) img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
:is(section.intro-section.style_3 .featured-image) .content-over-image{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
padding: .24rem 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.intro-section.style_3 .featured-image) .content-over-image{
padding: .36rem 0;
}
}
:is(:is(section.intro-section.style_3 .featured-image) .content-over-image) .container-2{
padding: 0;
}
:is(:is(section.intro-section.style_3 .featured-image) .content-over-image) h1{
text-align: center;
padding: 0 .24rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.intro-section.style_3 .featured-image) .content-over-image) h1{
padding: 0 .1rem;
}
}
:is(:is(section.intro-section.style_3 .featured-image) .content-over-image) .intro-text{
color: #fff;
}
:is(:is(section.intro-section.style_3 .featured-image) .content-over-image) .with-bar{
width: 100%;
padding: .08rem .32rem;
text-align: center;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
margin-top: .16rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.intro-section.style_3 .featured-image) .content-over-image) .with-bar{
margin-top: .24rem;
}
}
:is(section.intro-section.style_3 .under-image) .intro-text{
color: #000;
text-align: center;
margin-top: .32rem;
}
:is(section.intro-section.style_3 .under-image) .date-and-credit{
color: var(--gray);
}
:is(:is(section.intro-section.style_3 .under-image) .date-and-credit) .date:has( + .credit-name){
padding-right: .08rem;
border-right: 1px solid var(--gray);
}
section.intro-section.style_3 .date-and-credit{
padding: .32rem 0;
color: #000;
display: flex;
gap: .08rem;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: .14rem;
line-height: 0.86;
letter-spacing: -0.02em;
color: var(--gray-medium);
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.intro-section.style_3 .date-and-credit{
font-size: .1rem;
line-height: 0.6;
padding: .1rem;
}
}
.under_image_bottom_right:is(section.intro-section.style_3 .date-and-credit){
padding: .16rem 0;
color: var(--gray);
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.under_image_bottom_right:is(section.intro-section.style_3 .date-and-credit){
padding: .1rem 0;
margin-bottom: .36rem;
}
}
.under_image_bottom_right:is(section.intro-section.style_3 .date-and-credit) .date:has( + .credit-name){
padding-right: .08rem;
border-right: 1px solid var(--gray);
}
:is(section.intro-section.style_3 .date-and-credit) .credit-name{
font-weight: 700;
color: #000;
}
.under_image_bottom_right:is(section.intro-section.style_3 .date-and-credit){
width: 100%;
justify-content: flex-end;
}
.under_image_center:is(section.intro-section.style_3 .date-and-credit){
justify-content: center;
padding: .24rem;
}
.on_image_top_right:is(section.intro-section.style_3 .date-and-credit){
position: absolute;
top: 0;
right: 0;
padding: .24rem .16rem;
color: #000;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.on_image_top_right:is(section.intro-section.style_3 .date-and-credit){
right: unset;
left: 0;
}
}
section.intro-section.style_3 .intro-text + .date-and-credit{
padding: .16rem;
}
section.intro-section.style_3 .date-and-credit:has( + .share-cta){
padding-bottom: 0;
}
section.intro-section.style_3 .author-info,section.intro-section.style_3 .share-cta{
margin-top: .24rem;
}
:is(:is(section.intro-section.style_3 .share-cta) .author-info) .author-image{
width: .5rem;
height: .5rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.intro-section.style_3 .share-cta) .author-info) .author-image{
width: .32rem;
height: .32rem;
}
}
:is(:is(section.intro-section.style_3 .share-cta) .author-info) .author-name{
font-size: .18rem;
line-height: .86;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.intro-section.style_3 .share-cta) .author-info) .author-name{
font-size: .12rem;
}
}
:is(:is(section.intro-section.style_3 .share-cta) .author-info) .author-title{
font-size: .14rem;
line-height: 1;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(section.intro-section.style_3 .share-cta) .author-info) .author-title{
font-size: .1rem;
}
}
section.intro-section.style_3 .author-info{
display: flex;
gap: .28rem;
align-items: center;
margin-top: 0;
justify-content: center;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
section.intro-section.style_3 .author-info{
gap: .16rem;
flex-direction: column;
text-align: center;
}
}
:is(section.intro-section.style_3 .author-info) .author-image{
width: .8rem;
height: .8rem;
flex-shrink: 0;
border-radius: 50%;
overflow: hidden;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.intro-section.style_3 .author-info) .author-image{
width: .62rem;
height: .62rem;
}
}
:is(:is(section.intro-section.style_3 .author-info) .author-image) img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
:is(section.intro-section.style_3 .author-info) .author-name{
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: .24rem;
line-height: .86;
letter-spacing: -0.01em;
color: inherit;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.intro-section.style_3 .author-info) .author-name{
font-size: .16rem;
}
}
:is(section.intro-section.style_3 .author-info) .author-info-content{
display: flex;
flex-direction: column;
gap: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.intro-section.style_3 .author-info) .author-info-content{
gap: .04rem;
}
}
:is(section.intro-section.style_3 .author-info) .author-title{
font-family: 'Tiempos', sans-serif;
font-weight: 400;
font-size: .16rem;
line-height: 1.34;
letter-spacing: -0.02em;
color: inherit;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(section.intro-section.style_3 .author-info) .author-title{
font-size: .12rem;
}
}
/* Share CTA */
.share-cta{
padding: .24rem 0;
border-top: 1px solid var(--gray);
border-bottom: 1px solid var(--gray);
display: flex;
align-items: center;
justify-content: space-between;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.share-cta{
padding: .16rem 0;
flex-direction: column;
align-items: center;
gap: .16rem;
}
}
.share-cta .author-info{
display: flex;
gap: .28rem;
align-items: center;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.share-cta .author-info{
gap: .16rem;
flex-direction: column;
text-align: center;
}
}
:is(.share-cta .author-info) .author-image{
width: .8rem;
height: .8rem;
flex-shrink: 0;
border-radius: 50%;
overflow: hidden;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.share-cta .author-info) .author-image{
width: .62rem;
height: .62rem;
}
}
:is(:is(.share-cta .author-info) .author-image) img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
:is(.share-cta .author-info) .author-name{
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: .24rem;
line-height: .86;
letter-spacing: -0.01em;
color: inherit;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.share-cta .author-info) .author-name{
font-size: .16rem;
}
}
:is(.share-cta .author-info) .author-info-content{
display: flex;
flex-direction: column;
gap: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.share-cta .author-info) .author-info-content{
gap: .04rem;
}
}
:is(.share-cta .author-info) .author-title{
font-family: 'Tiempos', sans-serif;
font-weight: 400;
font-size: .16rem;
line-height: 1.34;
letter-spacing: -0.02em;
color: inherit;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.share-cta .author-info) .author-title{
font-size: .12rem;
}
}
.share-cta .share-button{
display: flex;
align-items: center;
gap: .12rem;
background: none;
border: none;
cursor: pointer;
font: inherit;
padding: 0;
}
.share-cta .share-label{
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: .16rem;
line-height: .86;
letter-spacing: -.03em;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.share-cta .share-label{
font-size: .12rem;
}
}
.share-cta .share-icon{
width: .48rem;
height: .48rem;
border: 1px solid #000;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
padding: .1rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.share-cta .share-icon{
width: .24rem;
height: .24rem;
padding: .04rem;
}
}
:is(.share-cta .share-icon) svg,:is(.share-cta .share-icon) img{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
object-position: center center;
}
.share-cta .share-copied-toast{
position: fixed;
left: 50%;
bottom: 1.5rem;
transform: translateX(-50%);
background-color: #000;
color: #fff;
padding: .16rem .24rem;
transition: opacity 1.5s;
z-index: 9999;
border-radius: .08rem;
}
.share-cta .share-copied-toast[hidden]{
opacity: 0;
pointer-events: none;
}
/* Archive */
.archive-hero{
display: flex;
width: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
padding-top: .64rem;
padding-bottom: .48rem;
}
.archive-hero:has(.hero-img){
padding-top: .16rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.archive-hero{
padding-bottom: .32rem;
padding-top: .32rem;
}
}
.archive-hero .hero-img{
width: 1.08rem;
height: 1.08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.archive-hero .hero-img{
width: .48rem;
height: .48rem;
}
}
:is(.archive-hero .hero-img) img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.archive-hero .archive-hero-title{
text-align: center;
max-width: 8.5rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.archive-hero .archive-hero-title{
max-width: 100%;
padding: 0 .16rem;
}
}
.archive-hero .logo{
width: 1.26rem;
height: .09rem;
line-height: 1;
margin-top: .3rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.archive-hero .logo{
margin-top: .16rem;
}
}
:is(.archive-hero .logo) svg{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
}
:is(.archive-hero .logo) svg path{
fill: #000;
}
.categories-list{
width: 100%;
overflow: auto;
display: flex;
background-color: #000;
padding: .16rem 0;
/* padding-bottom: .32rem; */
color: #fff;
white-space: nowrap;
}
.categories-list .category-item{
padding: 0 .32rem;
font-size: .14rem;
line-height: .86;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
letter-spacing: -.03em;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.categories-list .category-item{
font-size: .12rem;
line-height: .6;
}
}
:is(.categories-list .category-item) + .category-item{
border-left: 1px solid var(--red);
}
.featured-articles{
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
gap: .06rem;
margin-top: .64rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.featured-articles{
grid-template-columns: 1fr;
margin-top: .2rem;
}
}
.featured-articles .left{
height: 6.3rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.featured-articles .left{
height: 4.12rem;
}
}
:is(.featured-articles .left) .card{
width: 100%;
height: 100%;
position: relative;
}
:is(:is(.featured-articles .left) .card) > a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
}
:is(:is(.featured-articles .left) .card) .card-header{
width: 100%;
height: 100%;
position: relative;
color: #fff;
}
:is(:is(:is(.featured-articles .left) .card) .card-header) .image{
width: 100%;
height: 100%;
position: relative;
}
:is(:is(:is(:is(.featured-articles .left) .card) .card-header) .image) img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
:is(:is(:is(:is(.featured-articles .left) .card) .card-header) .image)::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .2) 40%, rgb(0, 0, 0) 100%);
}
:is(:is(:is(.featured-articles .left) .card) .card-header) .category{
position: absolute;
top: .32rem;
right: .32rem;
background-color: #000;
border-radius: .04rem;
color: #fff;
font-size: .12rem;
line-height: .86;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
letter-spacing: -.03em;
padding: .06rem .1rem;
z-index: 10;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(.featured-articles .left) .card) .card-header) .category{
top: .16rem;
right: .16rem;
}
}
:is(:is(.featured-articles .left) .card) .card-body{
position: absolute;
left: 0;
bottom: 0;
padding: .32rem;
color: #fff;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(.featured-articles .left) .card) .card-body{
padding: .16rem;
}
}
:is(:is(:is(.featured-articles .left) .card) .card-body) .info{
font-size: .12rem;
line-height: 1;
font-family: 'Tiempos', sans-serif;
font-weight: 400;
letter-spacing: -0.01em;
}
:is(:is(:is(.featured-articles .left) .card) .card-body) .title{
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: .48rem;
line-height: .54rem;
letter-spacing: -.05em;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(.featured-articles .left) .card) .card-body) .title{
font-size: .32rem;
line-height: .4rem;
}
}
:is(:is(:is(.featured-articles .left) .card) .card-body) .excerpt{
font-size: .14rem;
line-height: 1.6;
font-family: 'Tiempos', sans-serif;
font-weight: 400;
letter-spacing: 0;
margin-top: .12rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(.featured-articles .left) .card) .card-body) .excerpt{
display: none;
}
}
.featured-articles .right{
height: 100%;
line-height: 0;
max-height: 6.3rem;
overflow: auto;
}
:is(.featured-articles .right) .inner{
display: flex;
flex-direction: column;
gap: .06rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.featured-articles .right{
max-height: fit-content;
grid-template-rows: unset;
grid-auto-rows: 1fr;
}
}
:is(.featured-articles .right) .card{
width: 100%;
height: 100%;
background-color: var(--blue);
display: flex;
min-height: 2.06rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.featured-articles .right) .card{
min-height: unset;
flex-direction: column;
}
}
:is(:is(.featured-articles .right) .card) > a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
}
:is(:is(.featured-articles .right) .card) .card-header{
position: relative;
flex-shrink: 0;
}
:is(:is(:is(.featured-articles .right) .card) .card-header) .image{
height: 100%;
width: 2.06rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(.featured-articles .right) .card) .card-header) .image{
width: 100%;
height: 2.06rem;
}
}
:is(:is(:is(:is(.featured-articles .right) .card) .card-header) .image) img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
:is(:is(:is(.featured-articles .right) .card) .card-header) .category{
position: absolute;
top: .16rem;
right: .16rem;
background-color: #000;
border-radius: .04rem;
color: #fff;
font-size: .12rem;
line-height: .86;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
letter-spacing: -.03em;
padding: .06rem .1rem;
z-index: 10;
}
:is(:is(:is(:is(.featured-articles .right) .card) .card-header) .category) a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
:is(:is(.featured-articles .right) .card) .card-body{
flex-grow: 1;
padding: .4rem;
display: flex;
justify-content: center;
flex-direction: column;
gap: .12rem;
color: #000;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(.featured-articles .right) .card) .card-body{
padding: .24rem;
}
}
:is(:is(:is(.featured-articles .right) .card) .card-body) .info{
display: flex;
font-size: .12rem;
line-height: 1;
font-family: 'Tiempos', sans-serif;
font-weight: 400;
letter-spacing: -0.01em;
}
:is(:is(:is(.featured-articles .right) .card) .card-body) .title{
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: .32rem;
line-height: 1.2;
letter-spacing: -.05em;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(:is(.featured-articles .right) .card) .card-body) .title{
font-size: .2rem;
}
}
:is(:is(:is(.featured-articles .right) .card) .card-body) .excerpt{
display: none;
}
.featured-categories{
margin-top: .64rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.featured-categories{
margin-top: .32rem;
}
}
.featured-categories .featured-category + .featured-category{
margin-top: .64rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.featured-categories .featured-category + .featured-category{
margin-top: .2rem;
}
}
:is(.featured-categories .featured-category) .featured-category-grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: .06rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.featured-categories .featured-category) .featured-category-grid{
grid-template-columns: 1fr;
}
}
.four-cards:is(:is(.featured-categories .featured-category) .featured-category-grid) .card .excerpt{
display: none;
}
.three-cards:is(:is(.featured-categories .featured-category) .featured-category-grid){
grid-template-columns: 1fr 1fr 1fr;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.three-cards:is(:is(.featured-categories .featured-category) .featured-category-grid){
grid-template-columns: 1fr;
}
}
.featured-categories .featured-category-header{
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: .24rem;
margin-bottom: .3rem;
border-bottom: 1px solid var(--gray-medium);
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.featured-categories .featured-category-header{
padding-bottom: .16rem;
margin-bottom: .2rem;
}
}
:is(.featured-categories .featured-category-header) .view-all{
background-color: transparent;
box-shadow: none;
outline: none;
border: 1px solid #000;
padding: .08rem .16rem;
padding-right: .08rem;
display: flex;
gap: .16rem;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: .16rem;
line-height: .86;
letter-spacing: -.03em;
align-items: center;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.featured-categories .featured-category-header) .view-all{
padding: .04rem .08rem;
font-size: .12rem;
line-height: .6;
}
}
:is(:is(.featured-categories .featured-category-header) .view-all) .arrow{
width: .24rem;
height: .24rem;
}
:is(:is(:is(.featured-categories .featured-category-header) .view-all) .arrow) svg,:is(:is(:is(.featured-categories .featured-category-header) .view-all) .arrow) img{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.featured-writers{
background-color: var(--blue);
padding: .2rem;
margin-top: .64rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.featured-writers{
padding: .1rem;
margin-top: .32rem;
}
}
.featured-writers .text{
margin-top: .16rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.featured-writers .text{
margin-top: .1rem;
}
}
.featured-writers .writers{
display: flex;
border-bottom: 1px solid #fff;
margin-top: .44rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.featured-writers .writers{
margin-top: .2rem;
flex-wrap: wrap;
border-bottom: none;
}
}
:is(.featured-writers .writers) .writer{
width: 25%;
flex-grow: 1;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: .16rem;
padding: .32rem 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(.featured-writers .writers) .writer{
padding: .2rem 0;
gap: .08rem;
width: 50%;
border-bottom: 1px solid #fff;
}
}
:is(:is(.featured-writers .writers) .writer) + .writer{
border-left: 1px solid #fff;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(.featured-writers .writers) .writer):nth-child(odd){
border-left: none;
}
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(.featured-writers .writers) .writer):nth-child(n + 3){
border-bottom: none;
}
}
:is(:is(.featured-writers .writers) .writer) .writer-image{
width: 1.2rem;
height: 1.2rem;
object-fit: cover;
object-position: center;
overflow: hidden;
border-radius: 50%;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(.featured-writers .writers) .writer) .writer-image{
width: .48rem;
height: .48rem;
}
}
:is(:is(:is(.featured-writers .writers) .writer) .writer-image) img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
:is(:is(.featured-writers .writers) .writer) .writer-name{
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: .24rem;
line-height: .96;
letter-spacing: -.03em;
text-align: center;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(.featured-writers .writers) .writer) .writer-name{
font-size: .1rem;
}
}
.related-article{
text-align: center;
padding-bottom: .55rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.related-article{
padding-bottom: .32rem;
}
}
.related-article .next-category{
font-family: 'Tiempos', sans-serif;
font-weight: 400;
font-size: .16rem;
line-height: 1.34;
letter-spacing: -0.02em;
color: #000;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.related-article .next-category{
font-size: .12rem;
}
}
:is(.related-article .next-category) .bold{
font-weight: 700;
}
.related-article .title{
margin-top: .16rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.related-article .title{
margin-top: .1rem;
}
}
.related-article .author-info{
margin-top: .24rem;
font-family: 'Tiempos', sans-serif;
font-weight: 400;
font-size: .18rem;
line-height: .86;
letter-spacing: -0.01em;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.related-article .author-info{
font-size: .16rem;
}
}
/* Header */
header.header{
margin-top: .16rem;
position: sticky;
top: 0;
z-index: 100;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
header.header{
margin-top: .1rem;
top: .1rem;
}
}
header.header nav{
background-color: #000;
display: flex;
align-items: center;
justify-content: space-between;
padding: .08rem .24rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
header.header nav{
padding: .06rem .1rem;
}
}
header.header .logo{
display: block;
max-width: 2.24rem;
}
:is(header.header .logo) svg,:is(header.header .logo) img{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
header.header .logo{
max-width: 1.2rem;
}
}
header.header ul{
display: flex;
flex-direction: row;
padding-left: 0;
gap: .1rem;
align-items: center;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(header.header ul):not(:has(.hamburger)){
display: none;
}
}
:is(header.header ul) li{
color: #fff;
padding-left: 0;
padding: 0.1rem;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: .16rem;
line-height: .86;
letter-spacing: -.03em;
position: relative;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(header.header ul) li{
font-size: .14rem;
line-height: .6;
}
}
:is(:is(header.header ul) li)::before{
display: none;
}
:is(:is(header.header ul) li):after{
content: '';
position: absolute;
right: 0;
top: calc(100% + .06rem);
width: 0;
height: .02rem;
background-color: var(--red);
}
:is(:is(header.header ul) li):hover::after{
width: 100%;
}
:is(:is(:is(header.header ul) li):has(.button),:is(:is(header.header ul) li):has(.hamburger))::after{
display: none;
}
:is(:is(header.header ul) li):has(.hamburger){
padding-top: 0;
padding-bottom: 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(header.header ul) li):not(:has(.hamburger)){
display: none;
}
}
:is(:is(header.header ul) li):has(.button){
padding-top: 0;
padding-bottom: 0;
}
:is(:is(header.header ul) li):has(.button) a{
padding-top: 0.08rem;
padding-bottom: 0.08rem;
}
header.header .left{
display: flex;
gap: .54rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
header.header .left{
line-height: 0;
}
}
header.header .button{
background-color: var(--red);
color: #fff;
padding: .08rem .12rem;
}
:is(header.header .button):hover{
background-color: #fff;
color: #000;
}
header.header .hamburger{
border: none;
outline: none;
background-color: transparent;
box-shadow: none;
padding: .12rem 0;
display: flex;
flex-direction: column;
justify-content: space-around;
gap: .04rem;
cursor: pointer;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
header.header .hamburger{
padding: 0;
}
}
:is(header.header .hamburger) span{
width: .18rem;
height: .02rem;
background-color: #fff;
}
header.header .offcanvas-backdrop{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
display: none;
background-color: rgba(0, 0, 0, 0.3);
}
.active:is(header.header .offcanvas-backdrop){
display: block;
}
header.header .header-offcanvas{
position: fixed;
top: .16rem;
right: .16rem;
width: 4.48rem;
height: calc(100% - .32rem);
overflow: auto;
z-index: 1001;
padding: .16rem;
transform: translateX(0);
transition: transform 0.15s ease-in-out;
background-color: var(--cream);
display: flex;
flex-direction: column;
justify-content: space-between;
transform: translateX(calc(100% + .16rem));
}
@media screen and (max-width: 768px) and (orientation: portrait) {
header.header .header-offcanvas{
width: 100%;
height: calc(100% - .2rem);
top: .1rem;
right: .1rem;
transform: translateX(calc(100% + .1rem));
width: calc(100% - .2rem);
padding-top: .1rem;
}
}
.active:is(header.header .header-offcanvas){
transform: translateX(0);
}
:is(header.header .header-offcanvas) .inner{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
:is(header.header .header-offcanvas) ul{
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: .1rem;
padding: .16rem 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(header.header .header-offcanvas) ul{
display: flex;
gap: .06rem;
}
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(header.header .header-offcanvas) ul):first-child{
padding-top: 0;
}
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(header.header .header-offcanvas) ul) li{
display: block;
}
}
:is(:is(header.header .header-offcanvas) ul) li{
color: #000;
font-size: .18rem;
line-height: .28rem;
font-weight: 400;
width: calc(100% - .32rem);
padding: 0;
}
:is(:is(:is(header.header .header-offcanvas) ul) li)::after{
display: none;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(header.header .header-offcanvas) ul) li{
font-size: .14rem;
line-height: .2rem;
}
}
:is(:is(header.header .header-offcanvas) ul):has( + ul){
border-bottom: 1px solid var(--gray);
}
.social:is(:is(header.header .header-offcanvas) ul){
flex-direction: row;
display: flex;
}
.social:is(:is(header.header .header-offcanvas) ul) li{
height: .24rem;
}
:is(.social:is(:is(header.header .header-offcanvas) ul) li) svg,:is(.social:is(:is(header.header .header-offcanvas) ul) li) img{
width: 100%;
height: 100%;
object-fit: contain;
}
.instagram:is(.social:is(:is(header.header .header-offcanvas) ul) li){
width: .24rem;
}
.youtube:is(.social:is(:is(header.header .header-offcanvas) ul) li){
width: .4rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.social:is(:is(header.header .header-offcanvas) ul){
display: flex;
}
}
.main-mobile:is(:is(header.header .header-offcanvas) ul){
display: none;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.main-mobile:is(:is(header.header .header-offcanvas) ul){
display: flex;
}
}
.main-mobile:is(:is(header.header .header-offcanvas) ul) li{
font-weight: 700;
}
:is(header.header .header-offcanvas) .bottom{
display: block;
}
:is(:is(header.header .header-offcanvas) .bottom) li{
width: 100%;
}
:is(:is(:is(header.header .header-offcanvas) .bottom) li) + li{
margin-top: .16rem;
}
:is(:is(header.header .header-offcanvas) .bottom) .wide-button{
background-color: transparent;
border:none;
box-shadow: none;
display: flex;
justify-content: space-between;
color: #fff;
text-transform: uppercase;
font-size: .14rem;
line-height: .24rem;
letter-spacing: .07em;
align-items: center;
font-weight: 700;
}
:is(:is(:is(header.header .header-offcanvas) .bottom) .wide-button) span{
display: inline-block;
padding: .08rem .24rem;
}
.text:is(:is(:is(:is(header.header .header-offcanvas) .bottom) .wide-button) span){
flex-grow: 1;
border-right: 1px solid #fff;
}
.arrow:is(:is(:is(:is(header.header .header-offcanvas) .bottom) .wide-button) span){
flex-shrink: 0;
padding: .08rem;
display: flex;
}
.black:is(:is(:is(header.header .header-offcanvas) .bottom) .wide-button){
background-color: #000;
}
.red:is(:is(:is(header.header .header-offcanvas) .bottom) .wide-button){
background-color: var(--red);
}
header.header .close{
border: none;
outline: none;
background-color: transparent;
box-shadow: none;
padding: .12rem 0 .12rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
width: .4rem;
position: absolute;
top: .16rem;
right: .24rem;
z-index: 1002;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
header.header .close{
padding: 0;
right: .1rem;
}
}
footer.footer{
margin-top: 1rem;
margin-bottom: .16rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
footer.footer{
margin-top: .4rem;
margin-bottom: .1rem;
}
}
footer.footer .inner{
color: #fff;
background-color: #000;
border-top: .09rem solid var(--red);
padding: .24rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
footer.footer .inner{
padding: .1rem;
}
}
footer.footer .row{
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
footer.footer .row{
flex-wrap: wrap;
gap: .4rem;
}
}
footer.footer .column{
width: 3.37rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
footer.footer .column{
width: 100%;
}
}
footer.footer .form-description{
letter-spacing: 0;
margin-top: .4rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
footer.footer .form-description{
margin-top: .2rem;
}
}
footer.footer .form-wrapper{
margin-top: .24rem;
}
:is(footer.footer .form-wrapper) .gfield_label{
display: none;
}
:is(footer.footer .form-wrapper) .gform_body{
line-height: 0;
}
:is(footer.footer .form-wrapper) form{
display: flex;
gap: .04rem;
}
:is(footer.footer .form-wrapper) .gform_footer{
margin: 0;
padding: 0;
line-height: 0;
position: relative;
border: 1px solid #fff;
cursor: pointer;
width: .56rem;
}
:is(:is(footer.footer .form-wrapper) .gform_footer)::before{
content: '';
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: .24rem;
height: .24rem;
cursor: pointer;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(footer.footer .form-wrapper) .gform_footer{
flex-grow: 1;
}
}
:is(:is(footer.footer .form-wrapper) .gform_footer) input{
margin-bottom: 0 !important;
height: 100%;
opacity: 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(:is(footer.footer .form-wrapper) .gform_footer) input{
width: 100%;
}
}
:is(footer.footer .form-wrapper) .ginput_container_email input{
border: 1px solid #fff;
background-color: transparent;
color: #fff;
font-family: 'Tiempos', sans-serif;
font-size: .16rem;
line-height: 1.6;
letter-spacing: -.03em;
padding: .16rem .22rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(footer.footer .form-wrapper) .ginput_container_email input{
font-size: .12rem;
}
}
:is(:is(footer.footer .form-wrapper) .ginput_container_email input)::placeholder{
color: #fff;
}
:is(:is(footer.footer .form-wrapper) .ginput_container_email input):focus{
outline: none;
box-shadow: none;
}
footer.footer .copyright{
font-family: 'Open Sans', sans-serif;
font-size: .16rem;
line-height: 1.6;
letter-spacing: 0;
font-weight: 400;
margin-top: 1.52rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
footer.footer .copyright{
font-size: .12rem;
margin-top: .4rem;
}
}
footer.footer .middle ul{
display: flex;
flex-direction: column;
gap: .04rem;
}
footer.footer .middle ul li{
padding-left: 0;
}
:is(footer.footer .middle ul li)::before{
display: none;
}
footer.footer .middle ul li{
font-family: 'Open Sans', sans-serif;
letter-spacing: 0;
}
footer.footer .right{
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
footer.footer .right{
align-items: flex-start;
text-align: left;
}
}
:is(footer.footer .right) .flavor-text,:is(footer.footer .right) .cta-text{
max-width: 2.68rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(footer.footer .right) .flavor-text,:is(footer.footer .right) .cta-text{
max-width: calc(100% - .4rem);
}
}
:is(footer.footer .right) .flavor-text{
font-family: 'Open Sans', sans-serif;
font-size: .14rem;
line-height: 1.4;
letter-spacing: -.03em;
font-weight: 700;
text-transform: uppercase;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(footer.footer .right) .flavor-text{
font-size: .1rem;
line-height: 1.2;
}
}
:is(footer.footer .right) .cta-text{
letter-spacing: 0;
margin-top: .16rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(footer.footer .right) .cta-text{
margin-top: .1rem;
}
}
:is(footer.footer .right) .social{
justify-content: flex-end;
display: flex;
gap: .04rem;
margin-top: .08rem;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
:is(footer.footer .right) .social{
justify-content: flex-start;
}
}
:is(footer.footer .right) .social li{
padding-left: 0;
}
:is(:is(footer.footer .right) .social li)::before{
display: none;
}
:is(:is(footer.footer .right) .social li) a{
display: block;
width: .24rem;
height: .24rem;
}
:is(:is(:is(footer.footer .right) .social li) a) svg,:is(:is(:is(footer.footer .right) .social li) a) img{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}