.section__single-blog-content {
position: relative;
padding-inline: 8.8194vw;
padding-bottom: max(12.7083vw, 183px);
margin-top: max(6.6667vw, 96px);
max-width: 1100px;
margin-inline: auto;
}
.wrap__head-single-content {
display: flex;
flex-direction: column;
}
.wrap__head-single-content .wrap__categories {
display: flex;
gap: max(0.28vw, 4px);
}
.wrap__head-single-content .wrap__categories a {
display: inline-block;
color: white;
background-color: black;
font-size: 16px;
font-weight: 500;
line-height: 0.75;
padding: 5px 21.5px;
}
.wrap__head-single-content h1 {
display: block;
font-size: 24px;
line-height: 1.3333;
font-weight: 500;
margin-top: max(0.8333vw, 12px);
margin-bottom: max(1.3889vw, 20px);
}
.wrap__head-single-content .wrap__meta {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.wrap__head-single-content .wrap__meta .wrap__tags {
display: flex;
flex-wrap: wrap;
gap: max(0.8333vw, 12px);
}
.wrap__head-single-content .wrap__meta .wrap__date {
line-height: 0;
}
.wrap__head-single-content .wrap__meta p {
display: inline-block;
font-size: 16px;
line-height: 0.75;
font-weight: 400;
}
.wrap__body-single-content a {
color: #00aeef;
text-decoration: underline !;
}
.wrap__head-single-content .wrap__thumb {
display: block;
margin-block: 32px;
}
.wrap__head-single-content .wrap__thumb img {
display: block;
width: 100%;
height: auto;
}
.wrap__body-single-content {
position: relative;
padding-bottom: max(5vw, 72px);
border-bottom: 1px solid black;
}
.wrap__body-single-content h2.heading {
position: relative;
display: flex;
font-size: 24px;
line-height: 1.3333;
font-weight: 500;
padding-left: 32px;
padding-block: 21px 19px;
margin-block: 50px 32px;
}
.wrap__body-single-content h2.heading::before {
content: "";
position: absolute;
inset: 0;
display: inline-block;
width: 8px;
height: 100%;
background-color: black;
}
.wrap__body-single-content h3.heading-c {
display: block;
font-size: 20px;
line-height: 1.6;
font-weight: 500;
padding-bottom: 14px;
border-bottom: 1px solid black;
margin-bottom: 16px;
margin-top: 45px;
}
.wrap__body-single-content p {
display: block;
font-size: 16px;
line-height: 1.875;
font-weight: 400;
margin-bottom: 1rem;
word-wrap: break-word;
}
.wrap__body-single-content p:empty,
.wrap__body-single-content p:not(:has(br)):has(> *:empty),
.wrap__body-single-content p {
min-height: unset;
}
.wrap__body-single-content figure {
max-width: 100%;
}
.wrap__body-single-content figure+p {
margin-top: 16px;
}
.wrap__body-single-content img {
max-width: 100%;
}
.wrap__body-single-content .wp-caption-text {
font-size: 14px;
line-height: 2;
}
.wrap__body-single-content .wp-video {
margin-block: 56px;
}
.wrap__body-single-content img.aligncenter {
display: block;
margin-inline: auto;
}
.wrap__body-single-content .wp-embedded-content {
margin-block: 23px;
width: 100%;
max-width: 100%;
}
.wrap__body-single-content p:has(.wp-embedded-content)+h2,
.wrap__body-single-content p:has(.wp-embedded-content)+h3 {
margin-top: 0;
}
.wrap__body-single-content blockquote {
position: relative;
display: block;
background-color: #FFFFFF4D;
font-size: 16px;
line-height: 1.875;
font-weight: 400;
padding: 20px 36px;
border: 1px solid black;
border-radius: 10px;
margin-block: 23px;
}
.wrap__body-single-content blockquote::before {
content: "";
position: absolute;
top: -8px;
left: 32px;
width: 18px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 17 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.12 -0.000718043L16.368 2.06328C15.024 2.95928 14.016 3.91928 13.344 4.94328C12.672 5.96728 12.336 7.26328 12.336 8.83128L12.96 12.3353L10.704 9.64728C11.056 9.32728 11.392 9.08728 11.712 8.92728C12.032 8.76728 12.384 8.68728 12.768 8.68728C13.504 8.68728 14.16 8.91128 14.736 9.35928C15.312 9.83928 15.6 10.5273 15.6 11.4233C15.6 12.3193 15.344 13.0233 14.832 13.5353C14.288 14.0473 13.6 14.3033 12.768 14.3033C11.712 14.3033 10.896 13.8873 10.32 13.0553C9.71203 12.2233 9.40803 11.0393 9.40803 9.50328C9.40803 7.39128 9.90403 5.55128 10.896 3.98328C11.856 2.41528 13.264 1.08728 15.12 -0.000718043ZM5.71203 -0.000718865L6.96003 2.06328C5.61603 2.95928 4.60803 3.91928 3.93603 4.94328C3.23203 5.96728 2.88003 7.26328 2.88003 8.83128L3.50403 12.3353L1.29603 9.64728C1.61603 9.32728 1.93603 9.08728 2.25603 8.92728C2.57603 8.76728 2.94403 8.68728 3.36003 8.68728C4.09603 8.68728 4.75203 8.91128 5.32803 9.35928C5.90403 9.83928 6.19203 10.5273 6.19203 11.4233C6.19203 12.3193 5.92003 13.0233 5.37603 13.5353C4.83203 14.0473 4.16003 14.3033 3.36003 14.3033C2.27203 14.3033 1.44003 13.8873 0.864027 13.0553C0.288027 12.2233 2.67749e-05 11.0393 2.69092e-05 9.50328C2.70938e-05 7.39128 0.480027 5.55128 1.44003 3.98328C2.40003 2.41528 3.82403 1.08728 5.71203 -0.000718865Z' fill='black'/></svg>");
background-size: contain;
background-repeat: no-repeat;
}
.wrap__body-single-content blockquote p:last-child {
margin-bottom: 0;
}
.balloon-left-new,
.balloon-right-new {
display: flex;
align-items: flex-start;
gap: 24px;
margin-block: 30px;
}
.balloon-right-new {
justify-content: flex-end;
}
.wrap__body-single-content .balloon-left-new .people,
.wrap__body-single-content .balloon-right-new .people {
flex: 0 0 120px;
max-width: 120px;
width: 100%;
}
.balloon-left-new div:empty,
.balloon-right-new div:empty {
display: none;
}
.wrap__body-single-content .balloon-left-new img,
.wrap__body-single-content .balloon-right-new img {
display: block;
width: 100%;
height: auto;
margin-block: 0;
}
.wrap__body-single-content .says,
.wrap__body-single-content .balloon-left-new .p1,
.wrap__body-single-content .balloon-right-new .p1 {
position: relative;
padding: 15px 20px;
background: white;
border-radius: 20px;
margin-block: 0;
}
.wrap__footer-single-content {
position: relative;
padding-top: max(4.4444vw, 64px);
}
.wrap__footer-single-content h2 {
font-size: 16px;
line-height: 0.75;
font-weight: 400;
}
.wrap__footer-single-content .wrap__author .item__author {
margin-top: max(1.1111vw, 16px);
margin-bottom: max(2.7778vw, 40px);
}
.grid__related-post {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: max(1.6667vw, 24px);
margin-top: max(1.1111vw, 16px);
}
.item__related-post {
display: flex;
flex-direction: column;
}
.item__related-post-thumb {
position: relative;
display: block;
width: 100%;
height: 0;
padding-bottom: 66.4948%;
border: 1px solid black;
margin-bottom: max(0.5556vw, 8px);
}
.item__related-post-thumb img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.item__related-post-info {
display: flex;
flex-direction: column;
}
.item__related-post-info .item__categories {
display: flex;
flex-wrap: wrap;
gap: max(0.28vw, 4px);
}
.item__related-post-info .item__categories a {
display: inline-block;
color: white;
background-color: black;
font-size: 13px;
font-weight: 500;
line-height: 0.75;
padding: max(0.2778vw, 4px) max(0.9722vw, 14px);
}
.item__related-post-info h3 {
display: block;
font-size: 11px;
line-height: 1.6364;
font-weight: 500;
margin-block: max(0.2778vw, 4px);
}
.item__related-post-info .item__related-post-date {
display: inline-block;
font-size: 10px;
line-height: 0.7;
font-weight: 400;
}
.wrap__share-post {
display: flex;
flex-direction: column;
align-items: center;
gap: max(2.9861vw, 43px);
margin-top: max(7.9861vw, 115px);
}
.wrap__share-post h2 {
display: flex;
align-items: center;
justify-content: center;
}
.wrap__share-post h2 .icon-share {
display: inline-block;
width: max(16px, 1.1111vw);
height: max(18px, 1.25vw);
margin-right: max(15px, 1.0417vw);
}
.wrap__share-post h2 .icon-share svg {
display: block;
width: 100%;
height: 100%;
}
.wrap__share-post .wrap__share-post-icon {
display: flex;
align-items: center;
justify-content: center;
gap: max(2.7778vw, 40px);
}
.wrap__share-post .wrap__share-post-icon .item__share-post-icon {
display: inline-block;
width: max(40px, 2.7778vw);
height: max(40px, 2.7778vw);
}
.wrap__share-post .wrap__share-post-icon .item__share-post-icon svg {
display: block;
width: 100%;
height: 100%;
}
.wrap__navigation {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: max(11.1111vw, 160px);
}
.wrap__navigation .wrap__navigation-link {
font-size: 24px;
line-height: 0.75;
font-weight: 500;
}
.wrap__navigation .wrap__navigation-link a {
display: flex;
align-items: center;
gap: max(1.1111vw, 16px);
}
.wrap__navigation .wrap__navigation-link.wrap__navigation-back a {
display: inline-block;
width: max(30px, 2.0833vw);
height: max(30px, 2.0833vw);
}
.wrap__navigation .wrap__navigation-link.wrap__navigation-back a svg {
display: block;
width: 100%;
height: 100%;
}
.wrap__navigation .wrap__navigation-link .icon-arrow {
display: inline-block;
width: max(32px, 2.2222vw);
height: max(36px, 2.5vw);
}
.wrap__navigation .wrap__navigation-link .icon-arrow svg {
display: block;
width: 100%;
height: 100%;
}
@media screen and (max-width: 768px) {
.section__single-blog-content {
padding-inline: 6.4vw;
padding-bottom: 105px;
margin-top: 88px;
}
.wrap__head-single-content .wrap__categories {
flex-wrap: wrap;
gap: 4px;
}
.wrap__head-single-content .wrap__categories a {
font-size: 16px;
font-weight: 500;
line-height: 0.75;
padding: 6px 20px;
}
.wrap__head-single-content h1 {
font-size: 16px;
line-height: 1.75;
letter-spacing: 0.02em;
margin-top: 6px;
margin-bottom: max(2.6667vw, 10px);
}
.wrap__head-single-content .wrap__meta {
flex-direction: column;
gap: max(4.2667vw, 16px);
}
.wrap__head-single-content .wrap__meta .wrap__tags {
flex-wrap: wrap;
gap: max(2.1333vw, 8px);
}
.wrap__head-single-content .wrap__meta p {
font-size: 14px;
line-height: 0.7143;
font-weight: 400;
}
.wrap__head-single-content .wrap__thumb {
display: block;
margin-block: 22px 24px;
}
.wrap__body-single-content {
padding-bottom: max(17.6vw, 66px);
}
.wrap__body-single-content h2 {
font-size: 16px;
line-height: 1.875;
padding-left: max(4.2667vw, 16px);
padding-block: max(4vw, 15px);
margin-block: 24px;
}
.wrap__body-single-content h2::before {
width: 6px;
}
.wrap__body-single-content h3 {
font-size: 16px;
line-height: 1.875;
padding-bottom: 10px;
}
.wrap__body-single-content p {
font-size: 16px;
line-height: 1.75;
min-height: max(7.4667vw, 28px);
}
.wrap__body-single-content .wp-video {
margin-block: 26px;
}
.wrap__body-single-content .wp-caption-text {
font-size: 13px;
}
.wrap__body-single-content img.aligncenter {
display: block;
margin-inline: auto;
}
.wrap__body-single-content blockquote {
font-size: 16px;
line-height: 1.75;
padding: 19px;
margin-block: 32px 24px;
}
.wrap__body-single-content blockquote::before {
left: 20px;
}
.balloon-left-new,
.balloon-right-new {
gap: 14px;
margin-block: 28px;
}
.wrap__body-single-content .balloon-left-new .people,
.wrap__body-single-content .balloon-right-new .people {
flex: 0 0 10%;
max-width: 10%;
}
.wrap__footer-single-content {
padding-top: max(10.6667vw, 40px);
}
.wrap__footer-single-content h2 {
font-size: 16px;
}
.wrap__footer-single-content .wrap__related-post h2 {
font-size: 14px;
}
.wrap__footer-single-content .wrap__author .item__author {
margin-top: max(4.2667vw, 16px);
margin-bottom: max(10.6667vw, 40px);
}
.grid__related-post {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: max(4.2667vw, 16px);
margin-top: max(3.7333vw, 14px);
}
.item__related-post {
flex-direction: row;
gap: max(2.1333vw, 8px);
}
.item__related-post-thumb {
flex: 0 0 35.2vw;
max-width: 35.2vw;
padding-bottom: 0;
margin-bottom: 0;
aspect-ratio: 3 / 2;
height: auto;
}
.item__related-post-info {
flex: 1;
display: flex;
flex-direction: column;
}
.item__related-post-info .item__categories {
gap: max(1.0667vw, 4px);
}
.item__related-post-info .item__categories a {
font-size: 11px;
line-height: 0.7273;
padding: max(1.0667vw, 4px) max(3.7333vw, 14px);
}
.item__related-post-info h3 {
display: block;
font-size: 11px;
margin-block: max(1.0667vw, 4px) max(2.6667vw, 10px);
}
.item__related-post-info .item__related-post-date {
font-size: 10px;
line-height: 0.75;
}
.wrap__share-post {
gap: max(9.3333vw, 35px);
margin-top: max(17.8667vw, 67px);
}
.wrap__share-post h2 .icon-share {
display: inline-block;
width: max(16px, 4.2667vw);
height: max(18px, 4.8vw);
margin-right: max(15px, 4vw);
}
.wrap__share-post h2 .icon-share svg {
display: block;
width: 100%;
height: 100%;
}
.wrap__share-post .wrap__share-post-icon {
gap: 48px;
}
.wrap__share-post .wrap__share-post-icon .item__share-post-icon {
width: max(40px, 10.6667vw);
height: max(40px, 10.6667vw);
}
.wrap__navigation {
margin-top: 102px;
}
.wrap__navigation .wrap__navigation-link {
font-size: 20px;
}
.wrap__navigation .wrap__navigation-link a {
gap: max(2.4vw, 9px);
}
.wrap__navigation .wrap__navigation-link.wrap__navigation-back a {
width: max(30px, 8vw);
height: max(30px, 8vw);
}
.wrap__navigation .wrap__navigation-link .icon-arrow {
display: inline-block;
width: 32px;
height: 36px;
}
} .wrap__body-single-content ul {
padding: 0.5rem 0 1rem 0;
list-style: auto;
}
.wrap__body-single-content ol {
padding: 0.5rem 0 1rem 0;
list-style: auto;
}
.wrap__body-single-content li {
margin: 0.75rem 0 0.75rem 3rem;
font-size: 1.2rem;
font-weight: bold;
line-height: 1.5rem;
}
.wrap__body-single-content li span {
font-weight: normal;
font-size: 1rem;
}