:root {
    --blog-space-y      : 6rem;
}


.blog-list {padding-block: var(--blog-space-y);}
.blog-list-item {margin-bottom: 3rem; margin-inline: auto; width: 52rem; max-width: 100%; border-radius: 1rem; overflow: hidden; background: #fff; box-shadow: 5px 5px 20px 0 rgb(0 0 0 / 0.15);
    &:last-child {margin-bottom: 0;}

    a {color: #fe5500;
        &:hover, &:focus {color: #be4a10; text-decoration: underline;}
    }

    .bl-item-media {width: 100%; height: 300px;
        img {width: 100%; height: 100%; object-fit: cover;}
    }

    .bl-text {padding: 2rem;}
    .bl-item-title {margin-bottom: 1rem; font-size: 1.5rem; line-height: 1.1; font-weight: 600;}
    .bl-item-date {color: #777;}
    .bl-item-content {margin-block: 0.5rem 1rem;}
}


.blog-post {padding-block: var(--blog-space-y);}
.blog-post-item {margin-inline: auto; width: 60rem; max-width: 100%;
    .bp-title {margin-bottom: 0.5rem; font-size: 2rem; line-height: 1.2; font-weight: 600;}
    .bp-details {margin-bottom: 1rem; font-size: 1rem; color: #777;}
    .bp-media {width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 0.5rem; background: #fff;
        img {width: 100%; display: block; border-radius: 0.5rem; object-fit: cover;}
    }
    .bp-text {padding-block: 2rem;}
}