#singleEs{
background-color : #f2f4f6;
.breadcrumb{
margin-block : 0;
}
.es{
overflow : hidden;
background-color : white;
border-radius : 20px;
header{
h1{
position : relative;
font-weight : 700;
color : var( --red02 );
&::before , &::after{
position : absolute;
top : 50%;
display : block;
font-size : 0;
content : "";
background-color : currentColor;
translate : 0 -50%;
}
&::before{
height : 6px;
}
&::after{
width : auto;
height : 14px;
aspect-ratio : 1;
border-radius : 50%;
}
a{
color : var( --red02 );
-webkit-text-decoration : underline;
text-decoration : underline;
text-underline-offset : .2lh;
}
}
p{
font-weight : 700;
color : black;
}
}
.categories{
display : flex;
flex-wrap : wrap;
column-gap : 8px;
margin-top : 8px;
p{
display : grid;
place-items : center;
padding-block : 8px;
padding-inline : 12px;
font-weight : 700;
color : white;
background-color : var( --red02 );
border-radius : 100vmax;
}
ul{
display : flex;
align-items : center;
justify-content : center;
padding-block : 8px;
padding-inline : 4px;
border-radius : 100vmax;
outline : solid 1px var( --red02 );
outline-offset : -1px;
}
li{
padding-inline : 12px;
font-weight : 700;
color : var( --red02 );
+ li{
border-left : solid 1px currentColor;
}
}
}
}
@media screen and ( width <= 768px ){
padding-inline : 20px;
padding-top : 106px;
padding-bottom : 88px;
.es{
padding-block : 32px;
padding-inline : 20px;
header{
padding-inline : 20px;
h1{
font-size : 24px;
line-height : calc( 30 / 24 );
&::before{
left : -40px;
width : 25px;
}
&::after{
left : -22px;
}
}
p{
margin-top : 8px;
font-size : 14px;
line-height : calc( 17 / 14 );
}
}
.categories{
padding-inline : 20px;
margin-top : 16px;
p{
font-size : 12px;
line-height : calc( 19 / 12 );
}
li{
font-size : 12px;
line-height : calc( 19 / 12 );
}
}
}
.sidebar{
margin-top : 80px;
}
}
@media print , screen and ( width > 768px ){
padding-inline : calc( ( 100% - 1580px ) / 2 );
padding-top : 203px;
padding-bottom : 100px;
.breadcrumb{
padding-inline : 130px;
}
.columns02{
display : grid;
grid-template-columns : calc( 1160 * 100% / 1580 ) calc( 360 * 100% / 1580 );
row-gap : 120px;
align-items : start;
justify-content : space-between;
margin-top : 40px;
}
.es{
grid-row : 1;
grid-column : 1;
padding-block : 80px;
padding-inline : 130px;
header{
h1{
font-size : 35px;
line-height : calc( 50 / 35 );
&::before{
left : -130px;
width : 107px;
}
&::after{
left : -32px;
}
}
p{
font-size : 18px;
line-height : calc( 22 / 18 );
}
}
.categories{
margin-top : 24px;
p{
font-size : 14px;
line-height : calc( 19 / 14 );
}
li{
font-size : 14px;
line-height : calc( 19 / 14 );
}
}
}
.sidebar{
grid-row : 1/3;
grid-column : 2;
align-self : start;
}
}
} #singleEs .content .blur{
position : relative;
overflow : clip;
img{
width : 100%;
height : auto;
}
.logins{
position : absolute;
left : 0;
z-index : 1;
width : 100%;
background-color : color-mix( in sRGB , white 70% , transparent );
transition : translate 0s linear;
will-change : transform;
p{
text-align : center;
}
a{
width : fit-content;
margin-inline : auto;
}
}
@media screen and ( width <= 768px ){
margin-top : 24px;
.logins{
padding-block : 21px;
p{
margin-bottom : 16px;
font-size : 16px;
line-height : calc( 26 / 16 );
}
a{
width : 240px;
height : 46px;
font-size : 15px;
+ a{
margin-top : 8px;
}
}
}
}
@media print , screen and ( width > 768px ){
margin-top : 32px;
.logins{
padding-block : 25px;
p{
margin-bottom : 20px;
font-size : 20px;
line-height : calc( 28 / 20 );
}
a{
width : 380px;
height : 66px;
font-size : 15px;
+ a{
margin-top : 10px;
}
}
}
}
}
#singleEs.type-info .content{
color : black;
h2{
font-weight : 700;
background-color : #f2f4f6;
}
p + h2{
margin-top : 64px;
}
@media screen and ( width <= 768px ){
margin-top : 64px;
h2{
padding-block : 10px;
padding-inline : 16px;
font-size : 17px;
line-height : calc( 28 / 17 );
}
p{
font-size : 15px;
line-height : calc( 28 / 15 );
}
h2 + p{
margin-top : 24px;
}
}
@media print , screen and ( width > 768px ){
margin-top : 80px;
h2{
padding-inline : 24px;
font-size : 20px;
line-height : calc( 48 / 20 );
}
p{
font-size : 15px;
line-height : calc( 26 / 15 );
}
h2 + p{
margin-top : 32px;
}
}
}
#singleEs.type-interview .content{
h2{
font-weight : 700;
color : var( --red02 );
border-left-color : currentColor;
border-left-style : solid;
border-left-width : 5px;
}
h3{
font-weight : 700;
color : black;
background-color : #f2f4f6;
}
h3 + :where( table , .wp-block-table ){
margin-top : 8px;
}
:where( table , .wp-block-table ){
margin-inline : auto;
overflow : visible;
}
:where( table , .wp-block-table ){
margin-inline : auto;
th , td{
color : black;
vertical-align : middle;
border-top : 0;
border-bottom : solid 1px #d9d9d9;
border-left : 0;
border-right : 0;
}
th{
position : relative;
font-weight : 700;
text-align : center;
&::after{
position : absolute;
bottom : -1.5px;
left : 0;
width : 100%;
height : 3px;
font-size : 0;
content : "";
background-color : var( --red01 );
}
}
}
.wp-block-table{
tr:has( td:nth-of-type( 2 ) ){
td:first-of-type{
position : relative;
font-weight : 700;
text-align : center;
&::after{
position : absolute;
bottom : -1.5px;
left : 0;
width : 100%;
height : 3px;
font-size : 0;
content : "";
background-color : var( --red01 );
}
}
}
}
:where( table , .wp-block-table ) + h3{
margin-top : 64px;
}
h4{
font-weight : 700;
color : black;
border-left-color : var( --red01 );
border-left-style : solid;
}
p{
color : black;
}
p + h4 , p + h5{
margin-top : 24px;
}
h5{
display : flex;
flex-wrap : nowrap;
align-items : center;
justify-content : start;
&::before{
display : block;
width : auto;
aspect-ratio : 1;
font-size : 0;
content : "";
background-color : var( --red01 );
}
}
h5 + p{
margin-top : 8px;
}
p + h3{
margin-top : 64px;
}
@media screen and ( width <= 768px ){
margin-top : 64px;
h2{
padding-left : 10px;
font-size : 20px;
line-height : calc( 24 / 20 );
}
h2 + h3{
margin-top : 40px;
}
h3{
padding-inline : 16px;
font-size : 17px;
line-height : calc( 48 / 17 );
}
:where( table , .wp-block-table ){
width : calc( 300 * 100% / 320 );
th , td{
font-size : 14px;
}
th{
width : 120px;
padding-block : 16px;
line-height : calc( 32 / 14 );
}
td{
padding-block : 19px;
padding-inline : 16px;
line-height : calc( 26 / 14 );
}
}
.wp-block-table{
tr:has( td:nth-of-type( 2 ) ){
td:first-of-type{
width : 120px;
padding-block : 16px;
line-height : calc( 32 / 14 );
}
}
}
h3 + h4{
margin-top : 24px;
}
h4{
padding-left : 13px;
font-size : 18px;
line-height : calc( 22 / 18 );
border-left-width : 5px;
}
h4 + p{
margin-top : 25px;
}
p{
font-size : 15px;
line-height : calc( 28 / 15 );
}
h5{
column-gap : 6px;
font-size : 15px;
line-height : calc( 29 / 15 );
&::before{
height : 12px;
}
}
}
@media print , screen and ( width > 768px ){
margin-top : 80px;
h2{
padding-left : 20px;
font-size : 30px;
line-height : calc( 36 / 30 );
}
h2 + h3{
margin-top : 48px;
}
h3{
padding-inline : 24px;
font-size : 20px;
line-height : calc( 48 / 20 );
}
:where( table , .wp-block-table ){
width : min( 860px , calc( 860 * 100% / 900 ) );
th , td{
font-size : 15px;
}
th{
width : 240px;
padding-block : 24px;
line-height : calc( 32 / 15 );
}
td{
padding-block : 27px;
padding-inline : 24px;
line-height : calc( 26 / 15 );
}
}
.wp-block-table{
tr:has( td:nth-of-type( 2 ) ){
td:first-of-type{
width : 240px;
padding-block : 24px;
line-height : calc( 32 / 15 );
}
}
}
h3 + h4{
margin-top : 31px;
}
h4{
padding-left : 12px;
font-size : 20px;
line-height : calc( 24 / 20 );
border-left-width : 6px;
}
h4 + p{
margin-top : 32px;
}
p{
font-size : 15px;
line-height : calc( 26 / 15 );
}
h5{
column-gap : 12px;
font-size : 18px;
line-height : calc( 32 / 18 );
&::before{
height : 16px;
}
}
}
} #singleEs{
.relation{
h2{
width : fit-content;
font-weight : 700;
color : black;
border-bottom-color : var( --red02 );
border-bottom-style : solid;
}
> ul{
> li{
background-color : white;
border-radius : 20px;
> a{
display : block;
}
}
}
section{
display : grid;
align-items : start;
picture{
display : block;
img{
width : auto;
}
}
.categories{
display : flex;
flex-wrap : wrap;
column-gap : 8px;
p{
display : grid;
place-items : center;
padding-block : 8px;
padding-inline : 12px;
font-weight : 700;
color : white;
background-color : var( --red02 );
border-radius : 100vmax;
}
ul{
display : flex;
align-items : center;
justify-content : center;
padding-block : 8px;
padding-inline : 4px;
border-radius : 100vmax;
outline : solid 1px var( --red02 );
outline-offset : -1px;
}
li{
padding-inline : 12px;
font-weight : 700;
color : var( --red02 );
+ li{
border-left : solid 1px currentColor;
}
}
}
}
h3{
font-weight : 700;
color : black;
}
.excerpt{
position : relative;
overflow-y : hidden;
color : black;
letter-spacing : -.06em;
background-color : #f8f8f8;
&::after{
position : absolute;
left : 0;
display : block;
width : 100%;
content : "";
background-image : linear-gradient( to bottom , color-mix( in srgb , #f8f8f8 0% , transparent ) , color-mix( in srgb , #f8f8f8 100% , transparent ) );
}
}
span{
display : grid;
place-items : center;
font-weight : 700;
color : white;
background-color : var( --red02 );
border-radius : 100vmax;
}
}
@media screen and ( width <= 768px ){
.relation{
margin-top : 80px;
h2{
padding-bottom : 8px;
font-size : 18px;
line-height : calc( 22 / 18 );
border-bottom-width : 4px;
}
> ul{
margin-top : 32px;
> li{
padding-inline : 20px;
padding-top : 20px;
padding-bottom : 16px;
+ li{
margin-top : 16px;
}
}
}
section{
grid-template-rows : auto 16px auto 16px auto 8px auto;
grid-template-columns : auto 16px auto 1fr;
}
.categories{
grid-row : 1;
grid-column : 1 / -1;
p{
font-size : 12px;
line-height : calc( 19 / 12 );
}
li{
font-size : 12px;
line-height : calc( 19 / 12 );
}
}
picture{
grid-row : 3;
grid-column : 1;
align-self : center;
img{
height : 66px;
}
}
h3{
grid-row : 3;
grid-column : 3;
align-self : center;
font-size : 16px;
line-height : calc( 26 / 16 );
}
.excerpt{
grid-row : 5;
grid-column : 1 / 5;
max-height : 167px;
padding-block : 16px;
padding-inline : 16px;
font-size : 12px;
line-height : calc( 21 / 12 );
border-radius : 4px;
&::after{
top : 92px;
height : 75px;
}
}
span{
grid-row : 7;
grid-column : 1 / 5;
width : 100%;
padding-block : 5px;
padding-inline : 20px;
font-size : 12px;
line-height : calc( 19 / 12 );
}
}
}
@media print , screen and ( width > 768px ){
.relation{
grid-row : 2;
grid-column : 1;
align-self : start;
h2{
padding-bottom : 10px;
font-size : 26px;
line-height : calc( 31 / 26 );
border-bottom-width : 5px;
}
> ul{
margin-top : 40px;
> li{
padding-inline : 40px;
padding-top : 36px;
padding-bottom : 24px;
+ li{
margin-top : 40px;
}
}
}
section{
grid-template-rows : 6px auto 10px auto auto 16px auto;
grid-template-columns : auto 24px auto 1fr auto;
}
picture{
grid-row : 1 / 6;
grid-column : 1;
img{
height : 86px;
}
}
.categories{
grid-row : 2;
grid-column : 3;
p{
font-size : 14px;
line-height : calc( 19 / 14 );
}
li{
font-size : 14px;
line-height : calc( 19 / 14 );
}
}
h3{
grid-row : 4/6;
grid-column : 3;
align-self : start;
font-size : 20px;
line-height : calc( 28 / 20 );
}
span{
grid-row : 4/6;
grid-column : 5;
align-self : start;
padding-block : 5px;
padding-inline : 20px;
font-size : 12px;
line-height : calc( 19 / 12 );
}
.excerpt{
grid-row : 7;
grid-column : 1 / 6;
max-height : 256px;
padding-block : 16px;
padding-inline : 20px;
font-size : 15px;
line-height : calc( 24 / 15 );
border-radius : 4px;
&::after{
top : 148px;
height : 108px;
}
}
}
}
}