.blog-detail {
    padding-top: 6.25rem
}

@media(min-width: 768px) {
    .blog-detail {
        padding-top:12.625rem
    }
}

@media(min-width: 768px) {
    .blog-detail .container-xxl {
        padding-left:11.84375rem;
        padding-right: 11.84375rem
    }
}

.blog-detial__top {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.blog-detial__top h3,.blog-detial__top .h3 {
    font-family: "brightgrotesk-book-italic";
    font-size: 1.75rem;
    line-height: 2.4375rem;
    text-align: center;
    letter-spacing: -0.02em;
    color: #2f251c;
    margin-bottom: 0
}

@media(min-width: 768px) {
    .blog-detial__top h3,.blog-detial__top .h3 {
        font-size:2.875rem;
        line-height: 4rem
    }
}

.blog-date {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.75rem
}

@media(min-width: 768px) {
    .blog-date {
        margin-top:1.5rem
    }
}

.blog-date p {
    font-weight: 400;
    font-size: 0.8125rem;
    line-height: 1.0625rem;
    color: #2f251c;
    text-align: center;
    margin-bottom: 0;
    display: flex;
    align-items: center
}

@media(min-width: 768px) {
    .blog-date p {
        font-size:0.8125rem;
        line-height: 1.3125rem
    }
}

.blog-date p img {
    width: 16px;
    margin-right: 0.4375rem
}
.main-img {
    margin-top: 2rem;
    border-radius: 2rem 0
}

@media(min-width: 768px) {
    .main-img {
        margin-top:3rem
    }
}

.blog-detail__content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 4.375rem
}

@media(min-width: 768px) {
    .blog-detail__content {
        flex-direction:row;
        gap: 5rem
    }
}

.blog-detail__content__left {
    display: flex;
    position: relative;
    gap: 2rem
}

@media(min-width: 768px) {
    .blog-detail__content__left {
        margin-left:2.875rem;
        flex-direction: column
    }
}

.blog-detail__content__left::after {
    content: "";
    position: absolute;
    top: -9px;
    z-index: 1;
    width: 4.5rem;
    height: 0.1875rem;
    background: linear-gradient(95.29deg, #F29EB6 -6.72%, #E6116D 98.84%)
}

@media(min-width: 768px) {
    .blog-detail__content__left::after {
        width:5.75rem
    }
}

.blog-detail__content__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 0.5625rem
}

.blog-detail__content__date p {
    margin-bottom: 0
}

.blog-detail__content__date p:nth-child(1) {
    font-weight: 500;
    font-size: 2.5rem;
    line-height: 3.25rem;
    letter-spacing: .2px;
    color: #000
}

@media(min-width: 768px) {
    .blog-detail__content__date p:nth-child(1) {
        font-size:3.5rem;
        line-height: 4.5625rem
    }
}

.blog-detail__content__date p:nth-child(2) {
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: #3a3855
}

.blog-detail__content__socials {
    display: flex;
    grid-gap: 1rem
}

.blog-detail__content__socials>div {
    width: 3rem;
    height: 3rem;
    background: #fff;
    border-radius: 50%;
    border: 2px solid #fdf7f3;
    display: flex;
    align-items: center;
    justify-content: center
}

@media(min-width: 768px) {
    .blog-detail__content__socials>div {
        width:4.1875rem;
        height: 4.1875rem
    }
}

@media(min-width: 768px) {
    .blog-detail__content__socials {
        flex-direction:column
    }
}

.blog-detail__content__right p {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.375rem;
    letter-spacing: .02em;
    color: #555;
    margin-bottom: 0;
    margin-top: 1rem
}

@media(min-width: 768px) {
    .blog-detail__content__right p {
        margin-top:1.5rem;
        font-size: 1rem;
        line-height: 1.625rem
    }
}

.blog-detail__content__right h4,.blog-detail__content__right .h4 {
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.625rem;
    letter-spacing: .2px;
    color: #000;
    margin-bottom: 0;
    margin-top: 4rem
}

@media(min-width: 768px) {
    .blog-detail__content__right h4,.blog-detail__content__right .h4 {
        margin-top:3rem;
        font-size: 1.5rem;
        line-height: 1.9375rem
    }
}

.blog-detail__content__right img {
    border-radius: 2rem 0;
    margin-top: 3.5rem;
    object-fit: contain;
    width: 100%
}

@media(min-width: 768px) {
    .blog-detail__content__right img {
        margin-top:4rem
    }
}