html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

h1,
h2 {
    font-size: 50px;
}

.return-btn {
    display: grid;
    grid-template-columns: 100px;
    margin-top: 50px;
    justify-content: center;
}

.return {
    background: var(--yellow);
    border: 5px solid rgba(0, 0, 0, 0.03);
    display: grid;
    justify-content: center;
    padding: 10px;
    border-radius: 3px;
}

.return:hover {
    background: mistyrose;
}

/* Grid Layout for Blog */ 
.post {
    display: grid;
    max-width: 1000px;
    margin: 100px auto;
    grid-template-columns: 3fr 12fr 5fr;
    grid-gap: 10px 50px;
}

.post>* {
    grid-column: 2/-2;
}

.post>figure {
    grid-column: 1/-1;
    margin: 0;
}

.post>blockquote {
    font-size: 50px;
    grid-column: 1/-1;
    font-style: italic;
    text-align: center;
}

.tip {
    background: #fafafa;
    padding: 10px;
    grid-row: span 3;
    align-self: start;
}

.tip-left {
    grid-column: 1/span 1;
    text-align: right;
    border-right: 3px solid var(--yellow);
}

.tip-right {
    grid-column: 3/span 1;
    text-align: left;
    border-left: 3px solid var(--yellow); 
}