.document-detail__hero-visual {
padding-top: 0;
}
.document-detail__hero-visual img {
width: min(650px, 48vw);
max-height: 480px;
object-fit: contain;
filter: drop-shadow(0 28px 38px rgb(21 21 21 / 18%));
}
.document-detail :is(.when-needed,.popular-tasks,.document-explain,.scenarios,.cost-factors,.related-categories,.process,.services-catalog,.faq,.seo,.cases,.request,.final-cta) {
position: relative;
overflow: clip;
}
.document-detail :is(.when-needed,.popular-tasks,.document-explain,.scenarios,.cost-factors,.related-categories,.process,.services-catalog,.faq,.seo,.cases,.request,.final-cta) > .container {
position: relative;
}
.document-detail .section-word {
--section-word-opacity: .08;
}
.document-detail .popular-tasks .section-word,
.document-detail .related-categories .section-word,
.document-detail .process .section-word,
.document-detail .request .section-word {
--section-word-color: #fff;
}
.document-detail .situation-grid article > img {
opacity: .42;
}
.document-detail .situation-grid h3,
.document-detail .situation-grid p {
max-width: 78%;
}
.document-detail .document-list-columns strong {
color: inherit;
font: inherit;
font-weight: 650;
}
.document-detail .process__header p {
max-width: 760px;
margin: 0;
color: rgb(255 255 255 / 68%);
font-size: 16px;
line-height: 1.55;
}
.document-detail .category-links {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.document-detail .cost-grid--five {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.document-detail .cost-grid--five:has(> :nth-child(8)) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.document-detail .category-scenario-grid:has(> :nth-child(7)) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.document-detail .document-detail-notice .final-cta__card {
min-height: 310px;
}
.document-detail-related .service-catalog-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (hover: hover) and (pointer: fine) {
.document-detail .situation-grid article:hover > img {
opacity: .62;
}
}
@media (max-width: 1180px) {
.document-detail .cost-grid--five,
.document-detail .cost-grid--five:has(> :nth-child(8)),
.document-detail .category-scenario-grid:has(> :nth-child(7)),
.document-detail-related .service-catalog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.document-detail__hero-visual img {
width: min(720px, 100%);
}
}
@media (max-width: 700px) {
.document-detail .category-links,
.document-detail .cost-grid--five,
.document-detail .cost-grid--five:has(> :nth-child(8)),
.document-detail .category-scenario-grid:has(> :nth-child(7)),
.document-detail-related .service-catalog-grid {
grid-template-columns: 1fr;
}
.document-detail .situation-grid h3,
.document-detail .situation-grid p {
max-width: 82%;
}
}