:root {
--ink: #32373c;
--primary: #d6204e;
--primary-dark: #a8163c;
--yellow: #ffe566;
--pink: #ffd1e3;
--cyan: #bfe6ff;
--green: #c8ea96;
--soft-shadow: 0 2px 6px rgba(50, 55, 60, .08);
}
* {
box-sizing: border-box
} html {
scroll-behavior: smooth;
}
html,
body {
margin: 0;
padding: 0;
background: #f6f8fb;
color: var(--ink);
font-family: "Yusei Magic", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", Arial, sans-serif; font-size: 17px;
font-weight: 600; }
.wrap {
max-width: 1180px;
margin: 0 auto;
padding: 18px 20px 80px;
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 32px;
align-items: start
}
.main {
min-width: 0
}
.sidebar {
position: sticky;
top: 18px
}
.crumb {
font-family: "Zen Maru Gothic";
color: #888;
margin: 6px 0 20px;
font-weight: 600;
a {
font-family: "Zen Maru Gothic";
font-weight: 600;
font-size: 13px;
color: #888;
text-decoration: none;
}
}
h1,
h2,
h3,
h4,
h5,
h6,
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
caption,
canvas,
center,
cite,
code,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
form,
footer,
header,
hgroup,
h1,
h2,
h3,
h4,
h5,
h6,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
main,
small,
span,
strike,
strong,
sub,
summary,
sup,
tt,
table,
tbody,
textarea,
tfoot,
thead,
time,
tr,
th,
td,
u,
ul,
var,
video {
line-height: 1.85;
} .title-wrap {
padding: 0 0 28px
} .badge-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
flex-wrap: wrap
}
.badge {
display: inline-block;
font-family: "RocknRoll One";
font-size: 12px;
padding: 4px 12px;
border-radius: 4px;
border: 1.5px solid var(--ink); }
.badge.red {
background: var(--primary);
color: #fff;
border-color: var(--primary)
}
.badge.yellow {
background: var(--yellow)
}
.badge.gray {
background: #f1f3f6;
color: #555
} .company-header {
font-family: "Zen Maru Gothic";
font-weight: 900;
font-size: 22px;
color: var(--ink);
margin: 0 0 16px;
line-height: 1.5;
} h1.hook {
font-size: 26px;
line-height: 1.5;
margin: 0 0 10px;
letter-spacing: -.01em;
color: var(--ink);
}
h1.hook .quote-block {
font-family: "Zen Maru Gothic";
font-weight: 900;
display: block;
background: #fff;
border-left: 5px solid var(--primary);
padding: 14px 18px;
border-radius: 0 10px 10px 0;
font-size: 24px;
line-height: 1.6;
margin-bottom: 12px;
box-shadow: var(--soft-shadow);
}
h1.hook .quote-block .em {
background: linear-gradient(transparent 55%, var(--yellow) 55%);
padding: 0 2px;
font-family: "Zen Maru Gothic";
font-weight: 900;
}
.hook-sub {
font-family: "Zen Maru Gothic";
font-weight: 700;
font-size: 14px;
color: #666;
margin: 0 0 18px;
line-height: 1.7;
} .hero {
background: #fff;
border: 2px solid var(--ink);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(50, 55, 60, .08);
position: relative;
} .hero-body {
display: grid;
grid-template-columns: 100px 1fr;
gap: 16px;
align-items: flex-start;
padding: 18px 20px 16px
}
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
background: #f1f4f8;
border: 2px solid var(--ink);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex: 0 0 100px;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.attr-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.attr-pill {
display: inline-block;
background: var(--primary);
color: #fff;
font-family: "RocknRoll One";
font-size: 12px;
padding: 3px 12px;
border-radius: 9999px;
}
.profile-dl {
display: grid;
grid-template-columns: auto 1fr auto 1fr;
gap: 2px 12px;
margin: 0 0 10px;
align-items: baseline
}
.profile-dl dt {
font-weight: 700;
color: #888;
font-size: 11px;
letter-spacing: .06em;
white-space: nowrap
}
.profile-dl dd {
font-family: "Zen Maru Gothic";
margin: 0;
font-weight: 800;
color: var(--ink);
font-size: 13.5px;
line-height: 1.5
}
.profile-dl dd.wide {
grid-column: 2/-1;
b{
font-family: "Zen Maru Gothic";
font-weight: 800;
}
}
.profile-dl dd .sub {
font-size: 10px;
font-weight: 700;
color: #666;
background: #f1f3f6;
padding: 1px 6px;
border-radius: 9999px;
margin-left: 4px
}
.profile-dl dd .sub.hum {
background: #ffeaef;
color: var(--primary)
} .hero-quote {
padding: 12px 20px 14px;
border-top: 1.5px dashed #e4e8ee;
background: #fffdf5;
font-family: "Klee One";
font-size: 15px;
font-weight: 600;
line-height: 1.8;
color: var(--ink);
}
.hero-quote::before {
content: "💬 就活生へのひとこと";
display: block;
font-family: "RocknRoll One";
font-size: 11px;
color: var(--primary);
letter-spacing: .05em;
margin-bottom: 4px;
} .knowables {
position: relative;
margin-top: 28px;
background: #fff;
border: 2px solid var(--ink);
border-radius: 18px;
padding: 28px 20px 24px;
box-shadow: 0 4px 14px rgba(50, 55, 60, .08);
}
.section-title {
display: inline-block;
font-family: "Zen Maru Gothic";
font-weight: 900;
font-size: 16px;
background: var(--ink);
color: #fff;
padding: 7px 20px;
border-radius: 9999px;
position: absolute;
top: -18px;
left: 20px;
}
.section-title.alt {
background: var(--primary)
}
.kn-lead {
font-family: "Zen Maru Gothic";
font-weight: 700;
font-size: 13.5px;
color: #888;
margin: 6px 0 16px;
line-height: 1.7;
a{
text-decoration: underline;
font-weight: 700;
}
} .q-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.q-row {
display: flex;
align-items: flex-start;
gap: 16px;
border: 2px solid var(--ink);
border-radius: 12px;
padding: 10px 16px;
box-shadow: 3px 3px 0 var(--ink);
} .q-row:nth-child(4n+1) {
background: #fffde8
}
.q-row:nth-child(4n+2) {
background: #fff0f6
}
.q-row:nth-child(4n+3) {
background: #eef7ff
}
.q-row:nth-child(4n+4) {
background: #f0faea
}
.q-row-num {
flex: 0 0 auto;
background: var(--ink);
color: #fff;
font-family: "RocknRoll One";
font-size: 13px;
padding: 4px 12px;
border-radius: 9999px;
white-space: nowrap;
margin-top: 4px;
}
.q-row-body {
flex: 1;
min-width: 0;
} .q-row-cat {
font-family: "RocknRoll One";
font-size: 12px;
border: 1.5px solid rgba(0, 0, 0, .2);
border-radius: 9999px;
padding: 2px 12px;
background: rgba(255, 255, 255, .7);
display: inline-block;
margin-bottom: 6px;
} .q-row-text {
font-family: "Zen Maru Gothic";
font-weight: 900;
font-size: 15.5px;
line-height: 1.65;
color: var(--ink);
margin-bottom: 4px;
} .q-row-summary {
font-family: "Zen Maru Gothic";
font-size: 13.5px;
font-weight: 600;
color: #555;
line-height: 1.6;
background: rgba(255, 255, 255, .65);
border-left: 4px solid rgba(0, 0, 0, .15);
padding: 4px 10px;
border-radius: 0 8px 8px 0;
margin-bottom: 6px;
}
.q-row-link {
font-family: "Zen Maru Gothic";
font-size: 13px;
font-weight: 700;
color: var(--primary);
text-decoration: none;
}
.q-row-link:hover {
text-decoration: underline;
} .basic-info {
margin-top: 48px;
background: #fff;
border: 2px solid var(--ink);
border-radius: 18px;
padding: 24px 24px 8px;
box-shadow: var(--soft-shadow);
position: relative
}
.sub-h {
font-family: "Zen Maru Gothic";
font-weight: 900;
font-size: 18px;
color: var(--ink);
padding: 2px 0 8px 12px;
border-left: 4px solid var(--primary);
margin: 6px 0 10px
}
.basic-info .tbl {
width: 100%;
border-collapse: collapse;
font-family: "Zen Maru Gothic"
}
.basic-info .tbl tr {
border-bottom: 1.5px solid var(--primary)
}
.basic-info .tbl tr:last-child {
border-bottom: none
}
.basic-info .tbl th {
width: 130px;
padding: 14px 8px;
text-align: left;
font-weight: 700;
color: var(--ink);
font-size: 15px
}
.basic-info .tbl td {
padding: 14px 8px;
font-size: 16px;
color: var(--ink);
font-weight: 700
} .interviewers {
margin-top: 32px
}
.int-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px
}
.int-card {
background: #fff;
border: 2px solid var(--ink);
border-radius: 14px;
padding: 18px;
box-shadow: var(--soft-shadow);
position: relative
}
.int-card .int-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px
}
.int-card .int-face {
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid var(--ink);
background: #f1f4f8;
display: flex;
align-items: center;
justify-content: center;
font-size: 34px;
flex: 0 0 64px
}
.int-card .int-role {
font-family: "Zen Maru Gothic";
font-weight: 900;
font-size: 17px;
color: var(--ink)
}
.int-card .int-tag {
display: inline-block;
font-family: "RocknRoll One";
font-size: 11px;
background: var(--primary);
color: #fff;
padding: 2px 10px;
border-radius: 9999px;
margin-top: 4px
}
.int-card dl {
margin: 0;
font-family: "Zen Maru Gothic";
font-size: 14.5px; }
.int-card dt {
font-weight: 700;
color: #777;
font-size: 12px;
margin-top: 8px;
letter-spacing: .04em
}
.int-card dd {
margin: 2px 0 4px;
color: var(--ink);
font-weight: 700
}
.int-card .quote {
margin-top: 14px;
background: #fff8d6;
border-left: 3px solid var(--primary);
padding: 12px 14px;
font-family: "Zen Maru Gothic";
font-size: 14.5px;
font-weight: 600;
line-height: 1.7;
color: var(--ink);
border-radius: 0 8px 8px 0
}
.int-card .quote::before {
content: "💬 "
} .interview {
margin-top: 36px;
padding: 34px 22px 28px;
background: #fff;
border: 2px solid var(--ink);
border-radius: 18px;
position: relative;
box-shadow: var(--soft-shadow)
}
.qa-block {
border: 2px solid var(--ink);
border-radius: 14px;
overflow: hidden;
box-shadow: 4px 4px 0 var(--ink);
margin-bottom: 20px;
}
.qa-q-section {
background: #e8f0ff;
padding: 16px 20px;
border-bottom: 2px solid var(--ink);
}
.qa-a-section {
background: #fffdf0;
padding: 16px 20px;
border-bottom: 2px solid var(--ink);
}
.qa-deep-section {
background: #fffbe5;
padding: 16px 20px;
}
.qa-role-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: "RocknRoll One";
font-size: 12px;
background: var(--ink);
color: #fff;
padding: 3px 12px;
border-radius: 9999px;
margin-bottom: 10px;
}
.qa-role-label.ans {
background: var(--primary)
}
.qa-role-label.deep {
background: #9a7800
}
.qa-role-label .face-mini {
font-size: 14px
}
.qa-cat {
display: inline-block;
font-family: "RocknRoll One";
font-size: 11px;
border: 1.5px solid rgba(0, 0, 0, .2);
border-radius: 9999px;
padding: 2px 10px;
background: rgba(255, 255, 255, .65);
margin-left: 8px;
vertical-align: middle;
}
.qa-text {
font-family: "Zen Maru Gothic";
font-weight: 700;
font-size: 17px;
line-height: 1.8;
color: var(--ink);
margin: 0;
} .cta-lock {
margin-top: 4px;
border: 3px solid var(--ink);
border-radius: 14px;
background: #fff;
box-shadow: 6px 6px 0 var(--ink);
overflow: hidden
}
.blur-preview {
filter: blur(5px);
user-select: none;
pointer-events: none;
font-family: "Zen Maru Gothic";
font-weight: 600;
line-height: 2;
color: #666;
font-size: 15px;
padding: 16px 20px 0;
-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}
.lock-cta-body {
padding: 0 32px 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.lock-header {
font-family: "Zen Maru Gothic";
font-weight: 900;
font-size: 16px;
color: var(--ink);
line-height: 1.75;
margin: 0 0 18px;
}
.lock-btn-outline {
display: block;
width: 100%;
max-width: 300px;
text-align: center;
text-decoration: none;
font-family: "Zen Maru Gothic";
font-weight: 900;
font-size: 16px;
color: var(--primary);
background: #fff;
border: 2.5px solid var(--primary);
border-radius: 999px;
padding: 13px 20px;
margin-bottom: 10px;
box-shadow: 3px 3px 0 var(--primary);
}
.lock-btn-filled {
display: block;
width: 100%;
max-width: 300px;
text-align: center;
text-decoration: none;
font-family: "Zen Maru Gothic";
font-weight: 900;
font-size: 16px;
color: #fff;
background: var(--primary);
border: 2.5px solid var(--ink);
border-radius: 999px;
padding: 13px 20px;
box-shadow: 3px 3px 0 var(--ink);
} .vote {
margin-top: 50px;
text-align: center
}
.vote .ttl {
font-family: "Zen Maru Gothic";
font-weight: 900;
font-size: 18px;
background: var(--yellow);
padding: 6px 18px;
display: inline-block;
border: 1.5px solid var(--ink);
border-radius: 30px
}
.vote .cnt {
font-size: 14px;
color: #555;
margin-top: 8px
}
.vote .btns {
margin-top: 10px;
display: inline-flex;
gap: 12px
}
.vote .btns button {
font-family: "Zen Maru Gothic";
font-weight: 700;
font-size: 16px;
background: #fff;
border: 2px solid var(--ink);
border-radius: 30px;
padding: 10px 22px;
box-shadow: 3px 3px 0 var(--ink);
cursor: pointer
}
.vote .btns button.yes {
background: var(--green)
} .related {
margin-top: 60px
}
.related h2 {
font-family: "Zen Maru Gothic";
font-weight: 900;
font-size: 22px;
color: var(--ink);
padding: 4px 0 4px 14px;
border-left: 5px solid var(--primary);
margin: 0 0 14px
}
.related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 18px
}
.rcard {
background: #fff;
border: 1.5px solid #e4e8ee;
border-radius: 10px;
padding: 12px;
box-shadow: var(--soft-shadow);
font-family: "Zen Maru Gothic";
font-weight: 600;
font-size: 14px;
position: relative
}
.rcard .thumb {
height: 80px;
background: repeating-linear-gradient(45deg, #eee, #eee 6px, #f5f5f5 6px, #f5f5f5 12px);
border: 1.5px dashed #aaa;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: #888;
margin-bottom: 8px;
border-radius: 6px
}
.rcard .corp {
font-weight: 700;
font-size: 15px
}
.rcard .tag {
display: inline-block;
font-size: 10px;
padding: 2px 6px;
border: 1.5px solid var(--ink);
border-radius: 4px;
margin: 4px 4px 0 0;
background: #fff
}
.rcard .tag.h {
background: var(--yellow)
}
.rcard .tag.p {
background: var(--pink)
}
@media(max-width:960px) {
.wrap {
grid-template-columns: 1fr;
gap: 24px
}
.sidebar {
position: static;
order: 2
}
}
@media(max-width:640px) {
html,
body {
font-size: 16px
}
.wrap{
padding: 18px 0px 80px;
}
h1.hook .quote-block {
font-size: 19px;
padding: 12px 14px
}
.hero-body {
grid-template-columns: 80px 1fr;
gap: 12px
}
.avatar {
flex: 0 0 80px;
width: 80px;
height: 80px;
font-size: 9px
}
.int-grid {
grid-template-columns: 1fr
}
.related-grid {
grid-template-columns: 1fr 1fr
}
.basic-info .tbl th {
width: 90px;
font-size: 14px
}
} #singleEs.type-info {
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 );
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-top : 203px;
padding-bottom : 100px;
.columns02 {
row-gap : 120px;
margin-top : 40px;
}
.es {
grid-row : 1;
grid-column : 1;
padding-block : 48px;
padding-inline : 56px;
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 );
}
}
}
}
}
#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;
}
}
} .limited-content-dummy__outer {
position : relative;
margin-top : 24px;
overflow : hidden;
border-radius : 16px;
}
.limited-content-dummy img {
display : block;
width : 100%;
height : auto;
}
.es-logins {
position : absolute;
z-index : 1;
top : 35px;
background : white;
padding : 40px 20px;
box-shadow : 0 0 20px rgba( 0 , 0 , 0 , .25 );
border-radius : 16px;
width : 80%;
left : 50%;
transform : translateX( -50% );
p {
font-size : 16px;
text-align : center;
font-weight : 700;
.red {
color : #DB0037;
font-size : 16px;
text-align : center;
font-weight : 700;
display : block;
line-height : 1.5;
}
}
.btn_group {
margin-top : 15px;
margin-bottom : 15px;
.btn {
width : 290px;
margin-right : auto;
margin-left : auto;
font-size : 16px;
height : 50px;
}
.btn:nth-of-type( 2 ) {
margin-top : 10px;
}
}
.bottom_area {
background-color : #F2F4F6;
border-radius : 16px;
width : fit-content;
margin-right : auto;
margin-left : auto;
padding : 25px 45px;
margin-top : 30px;
ul {
margin-right : auto;
margin-left : auto;
width : fit-content;
li {
font-size : 14px;
margin-bottom : 15px;
font-weight : 700;
list-style : disc;
.red {
color : #DB0037;
font-weight : 700;
}
}
li:last-of-type {
margin-bottom : 0;
}
}
}
}
@media screen and ( width <= 768px ) {
.es-logins {
padding : 24px 16px;
width : 90%;
.bottom_area {
padding : 20px 24px;
}
.btn_group .btn {
width : 100%;
max-width : 290px;
}
}
} #singleEs.type-info {
.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 / 14 );
}
.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;
}
}
}
}
}