.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 !important;
}
.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 {
position: relative;
display: flex;
font-size: 24px;
line-height: 1.3333;
font-weight: 500;
padding-left: 32px;
padding-block: 21px 19px;
margin-block: 32px;
}
.wrap__body-single-content h2::before {
content: "";
position: absolute;
inset: 0;
display: inline-block;
width: 8px;
height: 100%;
background-color: black;
}
.wrap__body-single-content h3 {
display: block;
font-size: 20px;
line-height: 1.6;
font-weight: 500;
padding-bottom: 14px;
border-bottom: 1px solid black;
margin-bottom: 16px;
}
.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 p+h2,
.wrap__body-single-content p+h3,
.wrap__body-single-content figure+h2,
.wrap__body-single-content figure+h3 {
margin-top: 45px;
}
.wrap__body-single-content p:has(img)+h2,
.wrap__body-single-content p:has(img)+h3 {
margin-top: 46px;
}
.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: 25px 36px;
border: 1px solid black;
border-radius: 10px;
margin-block: 23px;
}
.wrap__body-single-content blockquote::before {
content: "”";
position: absolute;
top: calc(max(1.0417vw, 15px) * -1);
left: max(1.25vw, 18px);
display: inline-flex;
align-items: center;
width: max(2.0833vw, 30px);
height: max(0.8333vw, 12px);
font-size: 48px;
line-height: 0.25;
font-weight: 400;
transform: rotate(180deg);
}
.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 p+h2,
.wrap__body-single-content p+h3,
.wrap__body-single-content figure+h2,
.wrap__body-single-content figure+h3 {
margin-top: 40px;
}
.wrap__body-single-content p:has(img)+h2,
.wrap__body-single-content p:has(img)+h3 {
margin-top: 24px;
}
.wrap__body-single-content .wp-video {
margin-block: 26px;
}
.wrap__body-single-content img.aligncenter {
display: block;
margin-inline: auto;
}
.wrap__body-single-content blockquote {
font-size: 16px;
line-height: 1.75;
padding: max(5.8667vw, 22px) max(3.7333vw, 14px);
margin-block: max(8.5333vw, 32px) max(6.9333vw, 26px);
}
.wrap__body-single-content blockquote::before {
left: max(2.5vw, 12px);
}
.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;
}
}