main.container {
    margin-top: calc(64px + var(--space-m) + var(--space-s));
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-m);
}

/* Top section of Post info */
.top {
    width: 100%;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    overflow: hidden;
    margin-top: var(--space-xs);
}

.top .group {
    min-height: 320px;
    display: flex;
    flex-direction: row; /* default: side by side */
}

.top .img-container {
    width: 42%;
    background-color: var(--color-secondary-100);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.top .img-container i {
    font-size: 80px;
    color: var(--color-secondary-600);
}

.top .post-info {
    display: flex;
    height: 100%;
    padding: var(--space-m) var(--space-l);   
    flex-direction: column;
}

.top .post-info .post-title {
    margin-top: var(--space-s);
    margin-bottom: var(--space-s);
    padding: 0;
}

.top .post-info .post-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin-bottom: var(--space-m);
}

.top .post-info .post-info-row .post-info-item {
    font-size: var(--font-size-caption);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-s);
}

.top .post-info .post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

.top .post-info .post-tags .post-tag {
    font-size: var(--font-size-caption);
    font-weight: 600;
    padding: 2px var(--space-s);
    border-radius: var(--radius-s);
    background: var(--color-primary-100);
    color: var(--color-primary-600);
    border: 1px solid var(--color-primary-300);
}

.top .post-info .post-desc {
    text-align: justify;
}

.top .post-info span.note {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.top .post-info .post-actions {
    padding-top: var(--space-m);
    display: flex;
    gap: var(--space-s);
}

.top .post-info .post-actions a.goto {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.top .post-info .post-actions a.goto i {
    margin-left: calc(-1 * var(--space-s));
    opacity: 0;    
    transition: 0.2s 0s all ease;
}

.top .post-info .post-actions a.goto:hover i, .top .post-info .post-actions a.goto:active i {
    margin-left: var(--space-xs);
    opacity: 1;
}

.top .post-info .post-actions button.share {
    display: flex;
    align-items: center;
    justify-content: center;
}

.top .post-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.top .post-grid .post-item {
    padding: 18px 24px;
    border-top: 0.5px solid var(--color-border);
}

.top .post-grid .post-item:nth-child(even) {
    border-left: 0.5px solid var(--color-border);
}

.top .post-grid .post-item .grid-title {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: var(--space-xs);
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

.top .post-grid .post-item .grid-content {
    font-size: 14px;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
}

@media screen and (max-width: 980px) {
    .top .img-container {
        width: 48%;
    }
}

@media screen and (max-width: 720px) {
    .top .group {
        flex-direction: column;
    }

    .top .img-container {
        width: 100%;
        height: 280px;
    }

    .top .post-info {
        border-bottom: none;
    }
}

/* Posts in the area of accessed post */

.post-row {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-m);
    overflow-x: auto;
    flex-wrap: nowrap;    
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    user-select: none;
}

.post-row::-webkit-scrollbar {
    display: none;
}

.post-row .card {
    width: calc(400px - 11px);
    flex-shrink: 0;
    scroll-snap-align: start;
    box-shadow: none;
}

.post-row .card .card-img {
    height: 180px;
}

.post-row .card .card-title {
    margin-bottom: 0;
}

.post-row .card .post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-m);
}

.post-row .card .post-tags .post-tag {
    font-size: var(--font-size-caption);
    font-weight: 600;
    padding: 2px var(--space-s);
    border-radius: var(--radius-s);
    background: var(--color-primary-100);
    color: var(--color-primary-600);
    border: 1px solid var(--color-primary-300);
}

.post-row .card p {
    font-size: var(--font-size-body-sm);
}

.more-posts .post-row .card .post-actions {
    display: flex;
    gap: 8px;
    padding-top: var(--space-m);
    border-top: 0.5px solid var(--color-border);
}

.more-posts .post-actions a.goto {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.more-posts .post-actions a.goto i {
    margin-left: calc(-1 * var(--space-s));
    opacity: 0;    
    transition: 0.2s 0s all ease;
}

.more-posts .post-actions a.goto:hover i, .post-actions a.goto:active i {
    margin-left: var(--space-xs);
    opacity: 1;
}

@media screen and (max-width: 1248px) {
    .post-row .card {
        width: calc(100% / 3 - 11px);
    }
}

@media screen and (max-width: 832px) {
    .post-row .card {
        width: calc(100% / 2 - 11px);
    }
}

@media screen and (max-width: 520px) {
    .post-row .card {
        width: calc(100% - 11px);
    }
}