/* hELLO PORTFOLIO v1.1.0 | https://github.com/pronist */

[data-list-style=profile],
[data-list-style=poster],
[data-list-style=square],
[data-list-style=picture-1-1],
[data-list-style=picture-2-3],
[data-list-style=list-2],
[data-list-style=grid-2],
[data-list-style=N],
[data-list-style=Z-],
[data-list-style=grid-5] {

    width: 100%;

    padding-left: 1rem;

    padding-right: 1rem
}

@media (min-width: 1100px) {

    [data-list-style=profile],
[data-list-style=poster],
[data-list-style=square],
[data-list-style=picture-1-1],
[data-list-style=picture-2-3],
[data-list-style=list-2],
[data-list-style=grid-2],
[data-list-style=N],
[data-list-style=Z-],
[data-list-style=grid-5] {

        margin-left: auto;

        margin-right: auto;

        width: var(--h-idx);

        padding-left: 0px;

        padding-right: 0px
    }
}

[data-list-style=profile],
[data-list-style=Z-],
[data-list-style=picture-1-1],
[data-list-style=picture-2-3] {

    display: grid;

    grid-template-columns: repeat(1, minmax(0, 1fr))
}

[data-list-style=square],
[data-list-style=list-2],
[data-list-style=grid-2],
[data-list-style=N] {

    display: grid;

    grid-template-columns: repeat(1, minmax(0, 1fr))
}

@media (min-width: 640px) {

    [data-list-style=square],
[data-list-style=list-2],
[data-list-style=grid-2],
[data-list-style=N] {

        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

[data-list-style=poster] {

    display: grid;

    grid-template-columns: repeat(1, minmax(0, 1fr))
}

@media (min-width: 640px) {

    [data-list-style=poster] {

        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (min-width: 768px) {

    [data-list-style=poster] {

        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (min-width: 1100px) {

    [data-list-style=poster] {

        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

[data-list-style=grid-5] {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr))
}

@media (min-width: 640px) {

    [data-list-style=grid-5] {

        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media (min-width: 768px) {

    [data-list-style=grid-5] {

        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

@media (min-width: 1100px) {

    [data-list-style=grid-5] {

        grid-template-columns: repeat(5, minmax(0, 1fr))
    }
}

[data-list-style=poster],
[data-list-style=square] {

    gap: 0.5rem
}

[data-list-style=profile],
[data-list-style=picture-1-1],
[data-list-style=picture-2-3] {

    row-gap: 1.5rem
}

@media (min-width: 640px) {

    [data-list-style=profile],
[data-list-style=picture-1-1],
[data-list-style=picture-2-3] {

        row-gap: 2rem
    }
}

[data-list-style=list-2] {

    row-gap: 1.5rem
}

@media (min-width: 640px) {

    [data-list-style=list-2] {

        row-gap: 2rem;

        -moz-column-gap: 2.5rem;

             column-gap: 2.5rem
    }
}

[data-list-style=grid-2] {

    row-gap: 1.5rem
}

@media (min-width: 640px) {

    [data-list-style=grid-2] {

        row-gap: 2rem;

        -moz-column-gap: 2rem;

             column-gap: 2rem
    }
}

[data-list-style=N] {

    row-gap: 1.5rem
}

@media (min-width: 640px) {

    [data-list-style=N] {

        row-gap: 2rem;

        -moz-column-gap: 2.5rem;

             column-gap: 2.5rem
    }
}

@media (min-width: 768px) {

    [data-list-style=N] {

        row-gap: 3rem;

        -moz-column-gap: 4rem;

             column-gap: 4rem
    }
}

[data-list-style=Z-] {

    row-gap: 1.5rem
}

@media (min-width: 768px) {

    [data-list-style=Z-] {

        row-gap: 4rem
    }
}

@media (min-width: 1100px) {

    [data-list-style=Z-] {

        row-gap: 8rem
    }
}

[data-list-style=grid-5] {

    gap: 1.5rem
}

/********** PROFILE **********/

@media (min-width: 640px) {

    [data-list-style=profile] .post {

        margin-left: auto;

        margin-right: auto;

        width: 480px
    }
}

[data-list-style=profile] .post .content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center
}

[data-list-style=profile] .post .content .picture .img .thumb {

    box-sizing: border-box;

    height: 8rem;

    width: 8rem;

    border-radius: 9999px;

    border-width: 4px;

    --tw-border-opacity: 1;

    border-color: rgb(230 230 233 / var(--tw-border-opacity));

    -o-object-fit: cover;

       object-fit: cover
}

.dark [data-list-style=profile] .post .content .picture .img .thumb {

    --tw-border-opacity: 1;

    border-color: rgb(53 54 56 / var(--tw-border-opacity))
}

[data-list-style=profile] .post .content .info {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center
}

[data-list-style=profile] .post .content .info .header .tit {

    margin-top: 1.5rem;

    font-size: 1.5rem;

    line-height: 2rem;

    font-weight: 800;

    --tw-text-opacity: 1;

    color: rgb(30 31 33 / var(--tw-text-opacity))
}

.dark [data-list-style=profile] .post .content .info .header .tit {

    --tw-text-opacity: 1;

    color: rgb(244 244 246 / var(--tw-text-opacity))
}

[data-list-style=profile] .post .content .info .summary {

    margin-top: 0.5rem;

    font-size: 0.875rem;

    line-height: 1.75rem;

    --tw-text-opacity: 1;

    color: rgb(153 153 161 / var(--tw-text-opacity))
}

/********** GALLERY **********/

[data-list-style=poster] .post .link:hover + .content::before {

    opacity: 1;

    content: var(--tw-content);

    transition-duration: 300ms
}

[data-list-style=poster] .post .link:hover + .content .info {

    opacity: 1;

    transition-duration: 300ms
}

[data-list-style=poster] .post .content::before {

    position: absolute;

    right: 0px;

    top: 0px;

    height: 100%;

    width: 100%;

    opacity: 0;

    z-index: 10;

    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));

    --tw-gradient-from: transparent;

    --tw-gradient-to: rgb(0 0 0 / 0);

    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

    content: var(--tw-content);

    --tw-gradient-to: rgb(41 42 45 / 0.5)
}

[data-list-style=poster] .post .content {

    position: relative;

    z-index: 20;

    display: flex;

    align-items: flex-end
}

[data-list-style=poster] .post .content .picture {

    height: 100%;

    width: 100%
}

[data-list-style=poster] .post .content .picture .img,
        [data-list-style=poster] .post .content .picture .fallback {

    position: relative;

    height: 100%;

    width: 100%;

    padding-top: 150%
}

[data-list-style=poster] .post .content .picture .img .thumb {

    position: absolute;

    top: 0px;

    left: 0px;

    height: 100%;

    width: 100%;

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity));

    -o-object-fit: cover;

       object-fit: cover
}

[data-list-style=poster] .post .content .info {

    position: absolute;

    z-index: 20;

    width: 100%;

    opacity: 0;

    padding-bottom: 1.5rem
}

@media not all and (min-width: 768px) {

    [data-list-style=poster] .post .content .info {

        padding-bottom: 2rem
    }
}

[data-list-style=poster] .post .content .info .header {

    display: flex;

    width: 100%;

    flex-direction: column;

    align-items: center;

    justify-content: flex-end;

    text-align: center
}

[data-list-style=poster] .post .content .info .header .tit {

    padding-left: 1.5rem;

    padding-right: 1.5rem;

    font-size: 1.25rem;

    line-height: 1.75rem;

    font-weight: 600;

    --tw-text-opacity: 1;

    color: rgb(244 244 246 / var(--tw-text-opacity))
}

@media (min-width: 640px) {

    [data-list-style=poster] .post .content .info .header .tit {

        font-size: 1.125rem;

        line-height: 1.75rem
    }
}

@media (min-width: 768px) {

    [data-list-style=poster] .post .content .info .header .tit {

        font-size: 1.5rem;

        line-height: 2rem
    }
}

[data-list-style=poster] .post .content .info .header .tit {

    margin-bottom: 1.75rem
}

@media (min-width: 640px) {

    [data-list-style=poster] .post .content .info .header .tit {

        margin-bottom: 1.25rem
    }
}

@media (min-width: 768px) {

    [data-list-style=poster] .post .content .info .header .tit {

        margin-bottom: 2.25rem
    }
}

[data-list-style=poster] .post .content .info .header .desc {

    display: flex;

    -moz-column-gap: 0.25rem;

         column-gap: 0.25rem;

    font-size: 0.875rem;

    line-height: 1.25rem
}

@media not all and (min-width: 768px) {

    [data-list-style=poster] .post .content .info .header .desc {

        display: none
    }
}

[data-list-style=poster] .post .content .info .header .desc * {

    --tw-text-opacity: 1;

    color: rgb(244 244 246 / var(--tw-text-opacity))
}

[data-list-style=square] .post .link:hover + .content::before {

    opacity: 1;

    content: var(--tw-content);

    transition-duration: 300ms
}

[data-list-style=square] .post .link:hover + .content .info {

    opacity: 1;

    transition-duration: 300ms
}

[data-list-style=square] .post .content::before {

    position: absolute;

    right: 0px;

    top: 0px;

    height: 100%;

    width: 100%;

    opacity: 0;

    z-index: 10;

    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));

    --tw-gradient-from: transparent;

    --tw-gradient-to: rgb(0 0 0 / 0);

    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

    content: var(--tw-content);

    --tw-gradient-to: rgb(41 42 45 / 0.5)
}

[data-list-style=square] .post .content {

    position: relative;

    z-index: 20;

    display: flex;

    align-items: flex-end
}

[data-list-style=square] .post .content .picture {

    height: 100%;

    width: 100%
}

[data-list-style=square] .post .content .picture .img,
        [data-list-style=square] .post .content .picture .fallback {

    position: relative;

    height: 100%;

    width: 100%;

    padding-top: 75%
}

[data-list-style=square] .post .content .picture .img .thumb {

    position: absolute;

    top: 0px;

    left: 0px;

    height: 100%;

    width: 100%;

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity));

    -o-object-fit: cover;

       object-fit: cover
}

[data-list-style=square] .post .content .info {

    position: absolute;

    z-index: 20;

    width: 100%;

    opacity: 0;

    padding-bottom: 1.5rem
}

@media not all and (min-width: 768px) {

    [data-list-style=square] .post .content .info {

        padding-bottom: 2rem
    }
}

[data-list-style=square] .post .content .info .header {

    display: flex;

    width: 100%;

    flex-direction: column;

    align-items: center;

    justify-content: flex-end;

    text-align: center
}

[data-list-style=square] .post .content .info .header .tit {

    padding-left: 1.5rem;

    padding-right: 1.5rem;

    font-size: 1.25rem;

    line-height: 1.75rem;

    font-weight: 600;

    --tw-text-opacity: 1;

    color: rgb(244 244 246 / var(--tw-text-opacity))
}

@media (min-width: 640px) {

    [data-list-style=square] .post .content .info .header .tit {

        font-size: 1.125rem;

        line-height: 1.75rem
    }
}

@media (min-width: 768px) {

    [data-list-style=square] .post .content .info .header .tit {

        font-size: 1.5rem;

        line-height: 2rem
    }
}

[data-list-style=square] .post .content .info .header .tit {

    margin-bottom: 1.75rem
}

@media (min-width: 640px) {

    [data-list-style=square] .post .content .info .header .tit {

        margin-bottom: 1.25rem
    }
}

@media (min-width: 768px) {

    [data-list-style=square] .post .content .info .header .tit {

        margin-bottom: 2.25rem
    }
}

[data-list-style=square] .post .content .info .header .desc {

    display: flex;

    -moz-column-gap: 0.25rem;

         column-gap: 0.25rem;

    font-size: 0.875rem;

    line-height: 1.25rem
}

@media not all and (min-width: 768px) {

    [data-list-style=square] .post .content .info .header .desc {

        display: none
    }
}

[data-list-style=square] .post .content .info .header .desc * {

    --tw-text-opacity: 1;

    color: rgb(244 244 246 / var(--tw-text-opacity))
}

[data-list-style=square] .post:nth-child(3n+1) {

    grid-row: span 2 / span 2
}

[data-list-style=square] .post:nth-child(3n+1) .content .img,
        [data-list-style=square] .post:nth-child(3n+1) .content .fallback {

    padding-top: calc(150% + 0.5rem)
}

/********** PICTURE **********/

[data-list-style=picture-1-1] .post {

    width: 100%
}

@media (min-width: 768px) {

    [data-list-style=picture-1-1] .post {

        width: 720px
    }
}

[data-list-style=picture-1-1] .post .content {

    display: flex;

    flex-direction: column;

    row-gap: 1.5rem
}

[data-list-style=picture-1-1] .post .content .picture .fallback {

    aspect-ratio: 1 / 1;

    padding-top: 100%
}

[data-list-style=picture-1-1] .post .content .picture .img .thumb {

    aspect-ratio: 1 / 1;

    -o-object-fit: cover;

       object-fit: cover
}

[data-list-style=picture-1-1] .post .content .info .header {

    display: flex;

    flex-direction: column;

    row-gap: 0.25rem
}

[data-list-style=picture-1-1] .post .content .info .header .tit {

    font-size: 1.25rem;

    line-height: 1.75rem;

    font-weight: 700;

    --tw-text-opacity: 1;

    color: rgb(30 31 33 / var(--tw-text-opacity))
}

.dark [data-list-style=picture-1-1] .post .content .info .header .tit {

    --tw-text-opacity: 1;

    color: rgb(244 244 246 / var(--tw-text-opacity))
}

@media (min-width: 1100px) {

    [data-list-style=picture-1-1] .post .content .info .header .tit {

        font-size: 1.5rem;

        line-height: 2rem
    }
}

[data-list-style=picture-1-1] .post .content .info .header .desc {

    display: flex;

    -moz-column-gap: 0.25rem;

         column-gap: 0.25rem;

    font-size: 0.875rem;

    line-height: 1.25rem
}

@media not all and (min-width: 768px) {

    [data-list-style=picture-1-1] .post .content .info .header .desc {

        display: none
    }
}

[data-list-style=picture-1-1] .post .content .info .header .desc * {

    --tw-text-opacity: 1;

    color: rgb(153 153 161 / var(--tw-text-opacity))
}

[data-list-style=picture-1-1] .post .content .info .summary {

    margin-top: 0.5rem;

    max-height: 5rem;

    overflow: hidden;

    font-size: 0.875rem;

    line-height: 1.75rem;

    --tw-text-opacity: 1;

    color: rgb(153 153 161 / var(--tw-text-opacity))
}

@media (min-width: 640px) {

    [data-list-style=picture-2-3] .post {

        width: 480px
    }
}

[data-list-style=picture-2-3] .post .content {

    display: flex;

    flex-direction: column;

    row-gap: 1.5rem
}

[data-list-style=picture-2-3] .post .content .picture .fallback {

    aspect-ratio: 2/3;

    padding-top: 100%
}

[data-list-style=picture-2-3] .post .content .picture .img .thumb {

    aspect-ratio: 2/3;

    -o-object-fit: cover;

       object-fit: cover
}

[data-list-style=picture-2-3] .post .content .info .header {

    display: flex;

    flex-direction: column;

    row-gap: 0.25rem
}

[data-list-style=picture-2-3] .post .content .info .header .tit {

    font-size: 1.25rem;

    line-height: 1.75rem;

    font-weight: 700;

    --tw-text-opacity: 1;

    color: rgb(30 31 33 / var(--tw-text-opacity))
}

.dark [data-list-style=picture-2-3] .post .content .info .header .tit {

    --tw-text-opacity: 1;

    color: rgb(244 244 246 / var(--tw-text-opacity))
}

@media (min-width: 1100px) {

    [data-list-style=picture-2-3] .post .content .info .header .tit {

        font-size: 1.5rem;

        line-height: 2rem
    }
}

[data-list-style=picture-2-3] .post .content .info .header .desc {

    display: flex;

    -moz-column-gap: 0.25rem;

         column-gap: 0.25rem;

    font-size: 0.875rem;

    line-height: 1.25rem
}

@media not all and (min-width: 768px) {

    [data-list-style=picture-2-3] .post .content .info .header .desc {

        display: none
    }
}

[data-list-style=picture-2-3] .post .content .info .header .desc * {

    --tw-text-opacity: 1;

    color: rgb(153 153 161 / var(--tw-text-opacity))
}

[data-list-style=picture-2-3] .post .content .info .summary {

    margin-top: 0.5rem;

    max-height: 5rem;

    overflow: hidden;

    font-size: 0.875rem;

    line-height: 1.75rem;

    --tw-text-opacity: 1;

    color: rgb(153 153 161 / var(--tw-text-opacity))
}

/********** LIST **********/

[data-list-style=list-2] .post {

    display: flex;

    flex-direction: column;

    row-gap: 1.5rem
}

@media (min-width: 640px) {

    [data-list-style=list-2] .post {

        row-gap: 0px
    }
}

[data-list-style=list-2] .post .content {

    display: flex;

    flex-direction: column;

    row-gap: 1rem
}

@media (min-width: 640px) {

    [data-list-style=list-2] .post .content {

        height: 7rem;

        flex-direction: row;

        align-items: center;

        justify-content: flex-end
    }
}

[data-list-style=list-2] .post .content .picture .img {

    width: 100%
}

@media (min-width: 640px) {

    [data-list-style=list-2] .post .content .picture .img {

        margin-right: 2rem;

        height: 6rem;

        width: 6rem;

        flex-shrink: 0
    }
}

[data-list-style=list-2] .post .content .picture .img .thumb {

    width: 100%;

    max-width: none;

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity));

    -o-object-fit: cover;

       object-fit: cover
}

@media (min-width: 640px) {

    [data-list-style=list-2] .post .content .picture .img .thumb {

        height: 6rem;

        width: 6rem
    }

    [data-list-style=list-2] .post .content .info {

        flex-grow: 1
    }
}

[data-list-style=list-2] .post .content .info .header .tit {

    font-size: 1.125rem;

    line-height: 1.75rem;

    font-weight: 700;

    --tw-text-opacity: 1;

    color: rgb(30 31 33 / var(--tw-text-opacity))
}

.dark [data-list-style=list-2] .post .content .info .header .tit {

    --tw-text-opacity: 1;

    color: rgb(244 244 246 / var(--tw-text-opacity))
}

@media (min-width: 1100px) {

    [data-list-style=list-2] .post .content .info .header .tit {

        font-size: 1.25rem;

        line-height: 1.75rem
    }
}

[data-list-style=list-2] .post .content .info .summary {

    margin-top: 0.5rem;

    max-height: 3.5rem;

    overflow: hidden;

    font-size: 0.875rem;

    line-height: 1.75rem;

    --tw-text-opacity: 1;

    color: rgb(153 153 161 / var(--tw-text-opacity))
}

[data-list-style=grid-2] .post .content {

    display: flex;

    flex-direction: column;

    row-gap: 1.5rem
}

[data-list-style=grid-2] .post .content .picture .img,
        [data-list-style=grid-2] .post .content .picture .fallback {

    position: relative;

    padding-top: 66.66%
}

[data-list-style=grid-2] .post .content .picture .img .thumb {

    position: absolute;

    top: 0px;

    left: 0px;

    height: 100%;

    width: 100%;

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity));

    -o-object-fit: cover;

       object-fit: cover
}

[data-list-style=grid-2] .post .content .info .header {

    display: flex;

    flex-direction: column;

    row-gap: 0.25rem
}

[data-list-style=grid-2] .post .content .info .header .tit {

    font-size: 1.25rem;

    line-height: 1.75rem;

    font-weight: 700;

    --tw-text-opacity: 1;

    color: rgb(30 31 33 / var(--tw-text-opacity))
}

.dark [data-list-style=grid-2] .post .content .info .header .tit {

    --tw-text-opacity: 1;

    color: rgb(244 244 246 / var(--tw-text-opacity))
}

@media (min-width: 1100px) {

    [data-list-style=grid-2] .post .content .info .header .tit {

        font-size: 1.5rem;

        line-height: 2rem
    }
}

[data-list-style=grid-2] .post .content .info .header .desc {

    display: flex;

    -moz-column-gap: 0.25rem;

         column-gap: 0.25rem;

    font-size: 0.875rem;

    line-height: 1.25rem
}

@media not all and (min-width: 768px) {

    [data-list-style=grid-2] .post .content .info .header .desc {

        display: none
    }
}

[data-list-style=grid-2] .post .content .info .header .desc * {

    --tw-text-opacity: 1;

    color: rgb(153 153 161 / var(--tw-text-opacity))
}

[data-list-style=grid-2] .post .content .info .summary {

    margin-top: 0.5rem;

    max-height: 3.5rem;

    overflow: hidden;

    font-size: 0.875rem;

    line-height: 1.75rem;

    --tw-text-opacity: 1;

    color: rgb(153 153 161 / var(--tw-text-opacity))
}

[data-list-style=N] .post .content {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    row-gap: 1.5rem
}

@media (min-width: 640px) {

    [data-list-style=N] .post .content {

        row-gap: 2.5rem
    }
}

[data-list-style=N] .post .content .picture .img .thumb {

    -o-object-fit: cover;

       object-fit: cover
}

[data-list-style=N] .post .content .picture .fallback {

    padding-top: 66.66%
}

[data-list-style=N] .post .content .info .header {

    display: flex;

    flex-direction: column;

    row-gap: 0.25rem
}

@media (min-width: 640px) {

    [data-list-style=N] .post .content .info .header {

        align-items: center
    }
}

[data-list-style=N] .post .content .info .header .tit {

    font-size: 1.25rem;

    line-height: 1.75rem;

    font-weight: 700;

    --tw-text-opacity: 1;

    color: rgb(30 31 33 / var(--tw-text-opacity))
}

.dark [data-list-style=N] .post .content .info .header .tit {

    --tw-text-opacity: 1;

    color: rgb(244 244 246 / var(--tw-text-opacity))
}

@media (min-width: 640px) {

    [data-list-style=N] .post .content .info .header .tit {

        text-align: center
    }
}

@media (min-width: 1100px) {

    [data-list-style=N] .post .content .info .header .tit {

        font-size: 1.5rem;

        line-height: 2rem
    }
}

[data-list-style=N] .post .content .info .header .desc {

    display: flex;

    -moz-column-gap: 0.25rem;

         column-gap: 0.25rem;

    font-size: 0.875rem;

    line-height: 1.25rem
}

[data-list-style=N] .post .content .info .header .desc * {

    --tw-text-opacity: 1;

    color: rgb(153 153 161 / var(--tw-text-opacity))
}

[data-list-style=N] .post .content .info .summary {

    margin-top: 0.5rem;

    max-height: 5rem;

    overflow: hidden;

    font-size: 0.875rem;

    line-height: 1.75rem;

    --tw-text-opacity: 1;

    color: rgb(153 153 161 / var(--tw-text-opacity))
}

@media (min-width: 640px) {

    [data-list-style=N] .post:nth-child(2n) .content {

        flex-direction: column-reverse
    }
}

[data-list-style=Z-] .post .content {

    display: flex;

    flex-direction: column;

    row-gap: 1rem
}

@media (min-width: 640px) {

    [data-list-style=Z-] .post .content {

        flex-direction: row
    }

    [data-list-style=Z-] .post .content .picture {

        width: 50%
    }
}

[data-list-style=Z-] .post .content .picture .img .thumb {

    position: relative;

    z-index: 10;

    width: 100%;

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity));

    -o-object-fit: cover;

       object-fit: cover
}

@media (min-width: 640px) {

    [data-list-style=Z-] .post .content .picture .img .thumb {

        max-width: none
    }
}

[data-list-style=Z-] .post .content .picture .fallback {

    padding-top: 100%
}

@media (min-width: 640px) {

    [data-list-style=Z-] .post .content .info {

        width: 50%
    }
}

[data-list-style=Z-] .post .content .info {

    display: flex;

    flex-direction: column;

    justify-content: center
}

[data-list-style=Z-] .post .content .info .header {

    display: flex;

    flex-direction: column;

    row-gap: 0.25rem
}

[data-list-style=Z-] .post .content .info .header .tit {

    font-size: 1.25rem;

    line-height: 1.75rem;

    font-weight: 700;

    --tw-text-opacity: 1;

    color: rgb(30 31 33 / var(--tw-text-opacity))
}

.dark [data-list-style=Z-] .post .content .info .header .tit {

    --tw-text-opacity: 1;

    color: rgb(244 244 246 / var(--tw-text-opacity))
}

@media (min-width: 1100px) {

    [data-list-style=Z-] .post .content .info .header .tit {

        font-size: 1.5rem;

        line-height: 2rem
    }
}

[data-list-style=Z-] .post .content .info .header .desc {

    display: flex;

    -moz-column-gap: 0.25rem;

         column-gap: 0.25rem;

    font-size: 0.875rem;

    line-height: 1.25rem
}

[data-list-style=Z-] .post .content .info .header .desc * {

    --tw-text-opacity: 1;

    color: rgb(153 153 161 / var(--tw-text-opacity))
}

[data-list-style=Z-] .post .content .info .summary {

    margin-top: 0.5rem;

    max-height: 5rem;

    overflow: hidden;

    font-size: 0.875rem;

    line-height: 1.75rem;

    --tw-text-opacity: 1;

    color: rgb(153 153 161 / var(--tw-text-opacity))
}

@media (min-width: 640px) {

    [data-list-style=Z-] .post:nth-child(2n) .content {

        flex-direction: row-reverse
    }

    [data-list-style=Z-] .post:nth-child(2n) .content .info {

        padding-right: 2.5rem
    }
}

@media (min-width: 1100px) {

    [data-list-style=Z-] .post:nth-child(2n) .content .info {

        padding-right: 5rem
    }
}

@media (min-width: 640px) {

    [data-list-style=Z-] .post:nth-child(2n+1) .content .info {

        padding-left: 2.5rem
    }
}

@media (min-width: 1100px) {

    [data-list-style=Z-] .post:nth-child(2n+1) .content .info {

        padding-left: 5rem
    }
}

[data-list-style=grid-5] .post {

    box-sizing: border-box;

    border-width: 1px;

    --tw-border-opacity: 1;

    border-color: rgb(230 230 233 / var(--tw-border-opacity));

    padding: 2rem
}

.dark [data-list-style=grid-5] .post {

    border-width: 0px;

    --tw-bg-opacity: 1;

    background-color: rgb(41 42 45 / var(--tw-bg-opacity))
}

.dark [data-list-style=grid-5] .post:hover {

    --tw-bg-opacity: 1;

    background-color: rgb(53 54 56 / var(--tw-bg-opacity))
}

[data-list-style=grid-5] .post .content {

    display: flex;

    flex-direction: column;

    align-items: center;

    row-gap: 1rem
}

[data-list-style=grid-5] .post .content .picture .fallback {

    padding-top: 100%
}

[data-list-style=grid-5] .post .content .picture .img .thumb {

    height: 5rem;

    width: 5rem;

    -o-object-fit: cover;

       object-fit: cover
}

[data-list-style=grid-5] .post .content .info .header .tit {

    font-size: 1.125rem;

    line-height: 1.75rem;

    font-weight: 600;

    --tw-text-opacity: 1;

    color: rgb(30 31 33 / var(--tw-text-opacity))
}

.dark [data-list-style=grid-5] .post .content .info .header .tit {

    --tw-text-opacity: 1;

    color: rgb(244 244 246 / var(--tw-text-opacity))
}