.post {
    background-color: var(--grey);
    padding: calc(100vw* 135 / var(--page-width)) calc(100vw* 47 / var(--page-width));
}

.post .content {
    display: flex;
}

.post .content figure {
    width: calc(100vw* 462 / var(--page-width));
    position: relative;
}

.post .content figure:before {
    position: absolute;
    content: "";
    z-index: 0;
    width: calc(100vw* 220 / var(--page-width));
    height: calc(100vw* 96 / var(--page-width));
    left: calc(100vw* 160 / var(--page-width));
    transform: translateY(-40%);
    background-image: url(../../images/post-sticker-1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: block;
}

.post .content figure .aspect-container {
    width: 96%;
    margin-top: calc(100vw* 20 / var(--page-width));
    margin-left: calc(100vw* 20 / var(--page-width));
}

.post .content figure .aspect-container picture {
    border: 2px solid var(--black);
    transform: rotate(-2.11deg);
}

.post .content .text {
    width: calc(100vw* 685 / var(--page-width));
    margin-left: calc(100vw* 83 / var(--page-width));
}

.post .content .text .date {
    color: var(--candy);
    font-size: calc(17rem / 13);
    display: block;
    margin-bottom: calc(100vw * 10 / var(--page-width));
}

.post .content .text h1 {
    display: block;
    margin-bottom: calc(100vw * 40 / var(--page-width));
}

.post .content .text > div {
    width: calc(100vw* 657 / var(--page-width));
}

.post .content .text > div h2,
.post .content .text > div h3,
.post .content .text > div h4,
.post .content .text > div h5 {
    display: block;
    margin-top: calc(100vw * 20 / var(--page-width));
    margin-bottom: calc(100vw * 10 / var(--page-width));
    font-size: calc(18rem / 13);
}

@media only screen and (max-width: 768px) {
    .post {
        padding: calc(100vw* 115 / var(--page-width)) calc(100vw* 27 / var(--page-width));
        overflow: hidden;
    }

    .post .content {
        display: block;
    }

    .post .content figure,
    .post .content .text > div {
        width: 100%;
    }

    .post .content figure .aspect-container {
        margin-left: calc(100vw* 10 / var(--page-width));
    }
    
    .post .content .text {
        width: 100%;
        margin-left: 0;
        margin-top: calc(100vw* 40 / var(--page-width));
    }

    .post .content figure:before {
        width: calc(100vw* 143 / var(--page-width));
        height: calc(100vw* 63 / var(--page-width));
        left: calc(100vw* 160 / var(--page-width));
        transform: translateY(-70%);
    }    

    .post .content .text .date {
        font-size: calc(13rem / 15);
    }

    .post .content .text h1 {
        font-size: calc(45rem / 15);
        margin-bottom: calc(100vw* 27 / var(--page-width));
    }
}