body {
background: #fcf6e5;
}
#single-blog-hero {
padding: 227px 0 200px;
background-image: url(//tamatanga.com/wp-content/uploads/2023/09/pink-hero.png);
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
#single-blog-image {
margin-top: -250px;
}
.single-blog-image {
height: 0;
padding-bottom: 40%;
position: relative;
}
.single-blog-image > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
-webkit-mask-image: url(//tamatanga.com/wp-content/uploads/2023/10/blog-mask.png);
mask-image: url(//tamatanga.com/wp-content/uploads/2023/10/blog-mask.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
mask-size: 100% 100%;
-webkit-mask-size: 100% 100%;
}
.single-blog-image .category {
font-family: "degular", sans-serif;
font-weight: 600;
font-style: normal;
font-size: 1.2rem;
color: #fffcf4;
padding: 6px 20px;
line-height: 1;
border-radius: 30px;
transition: 0.3s ease-in-out;
position: absolute;
left: 100px;
top: 100%;
transform: translateY(-50%);
}
#single-blog-content {
margin-top: 50px;
}
.single-blog-content {
padding: 0 100px;
}
.single-blog-content .text {
word-wrap: anywhere;
}
.single-blog-content .app {
-webkit-mask-image: url(//tamatanga.com/wp-content/uploads/2023/10/app-mask.png);
mask-image: url(//tamatanga.com/wp-content/uploads/2023/10/app-mask.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
mask-size: 100% 100%;
-webkit-mask-size: 100% 100%;
background: url(//tamatanga.com/wp-content/uploads/2023/10/app-bg-1.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 60px 45px;
overflow: hidden;
min-width: 250px;
max-width: 250px;
margin-left: 25px;
margin-bottom: 25px;
float: right;
}
.single-blog-content .app h3 {
font-size: 2rem;
line-height: 1;
}
.single-blog-content .app h4 {
font-size: 1.75rem;
margin-bottom: 1rem;
}
.single-blog-content .app h3,
.single-blog-content .app h4 {
color: #fffcf4;
}
.single-blog-content .app > a:first-of-type {
margin-bottom: 10px;
transform: rotate(1deg);
display: block;
float: left;
}
.single-blog-content .app > a:last-of-type {
transform: rotate(-3deg);
display: block;
float: right;
}
.single-blog-content .app img {
max-width: 150px;
height: auto;
}
#single-related {
padding-bottom: 150px;
margin-top: 75px;
}
.single-related {
display: grid;
gap: 50px;
grid-template-columns: repeat(3, minmax(0, 1fr));
columns: 3;
}
.single-related a {
height: fit-content;
}
.single-related .post .image {
width: 100%;
position: relative;
height: 0;
padding-bottom: 125%;
}
.single-related .post .image .category {
position: absolute;
top: 20px;
right: 20px;
box-shadow: 0 0 15px -5px rgba(0, 0, 0, 0.6);
}
.single-related .post .image img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
-webkit-mask-image: url(//tamatanga.com/wp-content/uploads/2023/06/Yellow-Box.png);
mask-image: url(//tamatanga.com/wp-content/uploads/2023/06/Yellow-Box.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
mask-size: 100% 100%;
-webkit-mask-size: 100% 100%;
}
.single-related .post .category {
font-family: "degular", sans-serif;
font-weight: 600;
font-style: normal;
font-size: 1.2rem;
color: #fffcf4;
padding: 6px 20px;
line-height: 1;
border-radius: 30px;
transition: 0.3s ease-in-out;
}
.single-related .post .date {
margin: 1rem 0;
font-weight: 600;
font-size: 1.2rem;
}
.single-related .post h3 {
margin-bottom: 0;
} @media screen and (max-width: 1900px) {
} @media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1112px) {
} @media screen and (max-width: 992px) {
.single-blog-content {
padding: 0;
}
.single-related {
grid-template-columns: repeat(2, minmax(0, 1fr));
columns: 2;
}
} @media screen and (max-width: 768px) {
} @media screen and (max-width: 576px) {
#single-blog-hero {
padding: 175px 0 100px;
}
#single-blog-image {
margin-top: -150px;
}
.single-blog-content .text {
display: flex;
flex-direction: column;
}
.single-blog-content .app {
order: 500;
margin-left: 0;
margin-bottom: 0;
float: left;
}
.single-related {
gap: 25px;
}
.single-related .post h3 {
font-size: 2rem;
}
} @media screen and (max-width: 375px) {
#single-blog-image {
margin-top: -125px;
}
#single-blog-hero {
padding: 150px 0 100px;
}
.single-related .post .image .category {
font-size: 0.8rem;
top: 10px;
right: 10px;
}
}