/* hELLO TYPOGRAPHY v1.0.1 | https://github.com/pronist */

[data-list-style=title-3xl],
[data-list-style=title-2xl],
[data-list-style=title-xl],
[data-list-style=title-lg],
[data-list-style=title],
[data-list-style='title-summary-1/2'],
[data-list-style=title-summary-2],
[data-list-style=summary],
[data-list-style='summary-title-1/2'],
[data-list-style=button],
[data-list-style=link],
[data-list-style=keyword] {

    width: 100%;

    padding-left: 1rem;

    padding-right: 1rem
}

@media (min-width: 1100px) {

    [data-list-style=title-3xl],
[data-list-style=title-2xl],
[data-list-style=title-xl],
[data-list-style=title-lg],
[data-list-style=title],
[data-list-style='title-summary-1/2'],
[data-list-style=title-summary-2],
[data-list-style=summary],
[data-list-style='summary-title-1/2'],
[data-list-style=button],
[data-list-style=link],
[data-list-style=keyword] {

        margin-left: auto;

        margin-right: auto;

        width: var(--h-idx);

        padding-left: 0px;

        padding-right: 0px
    }
}

[data-list-style=title-3xl],
[data-list-style=title-2xl],
[data-list-style=title-xl],
[data-list-style=title-lg],
[data-list-style=title],
[data-list-style='title-summary-1/2'],
[data-list-style=summary],
[data-list-style='summary-title-1/2'] {

    display: grid;

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

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

    display: grid;

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

@media (min-width: 640px) {

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

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

[data-list-style=keyword],
[data-list-style=link],
[data-list-style=button] {

    display: flex
}

[data-list-style=title-3xl],
[data-list-style=title-2xl],
[data-list-style=title-xl],
[data-list-style=title-lg],
[data-list-style=title],
[data-list-style='title-summary-1/2'],
[data-list-style=title-summary-2],
[data-list-style=summary],
[data-list-style='summary-title-1/2'] {

    row-gap: 1.5rem
}

@media (min-width: 640px) {

    [data-list-style=title-3xl],
[data-list-style=title-2xl],
[data-list-style=title-xl],
[data-list-style=title-lg],
[data-list-style=title],
[data-list-style='title-summary-1/2'],
[data-list-style=title-summary-2],
[data-list-style=summary],
[data-list-style='summary-title-1/2'] {

        row-gap: 2rem
    }
}

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

    row-gap: 1.5rem
}

@media (min-width: 640px) {

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

        row-gap: 2rem;

        -moz-column-gap: 2.5rem;

             column-gap: 2.5rem
    }
}

[data-list-style=keyword],
[data-list-style=link],
[data-list-style=button] {

    -moz-column-gap: 0.75rem;

         column-gap: 0.75rem
}

/********** TYPOGRAPHY **********/

[data-list-style=title-3xl] .post .content .info .header .tit {

    font-size: 6rem;

    line-height: 1;

    font-weight: 800;

    line-height: 7.75rem;

    --tw-text-opacity: 1;

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

.dark [data-list-style=title-3xl] .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=title-3xl] .post .content .info .header .tit {

        font-size: 8rem;

        line-height: 1;

        line-height: 10rem
    }
}

[data-list-style=title-3xl] .post .content .info .summary {

    margin-top: 1rem;

    font-size: 0.875rem;

    line-height: 1.75rem;

    --tw-text-opacity: 1;

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

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

    font-size: 3.75rem;

    line-height: 1;

    font-weight: 800;

    line-height: 5rem;

    --tw-text-opacity: 1;

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

.dark [data-list-style=title-2xl] .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=title-2xl] .post .content .info .header .tit {

        font-size: 4.5rem;

        line-height: 1;

        line-height: 6rem
    }
}

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

    margin-top: 1rem;

    font-size: 0.875rem;

    line-height: 1.75rem;

    --tw-text-opacity: 1;

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

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

    font-size: 2.25rem;

    font-weight: 800;

    line-height: 3rem;

    --tw-text-opacity: 1;

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

.dark [data-list-style=title-xl] .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=title-xl] .post .content .info .header .tit {

        font-size: 3rem;

        line-height: 1;

        line-height: 4rem
    }
}

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

    margin-top: 1rem;

    font-size: 0.875rem;

    line-height: 1.75rem;

    --tw-text-opacity: 1;

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

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

    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=title-lg] .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=title-lg] .post .content .info .header .tit {

        font-size: 1.875rem;

        line-height: 2.25rem
    }
}

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

    margin-top: 1rem;

    font-size: 0.875rem;

    line-height: 1.75rem;

    --tw-text-opacity: 1;

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

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

    font-size: 1.125rem;

    line-height: 1.75rem;

    font-weight: 800;

    --tw-text-opacity: 1;

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

.dark [data-list-style=title] .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=title] .post .content .info .header .tit {

        font-size: 1.25rem;

        line-height: 1.75rem
    }
}

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

    margin-top: 1rem;

    font-size: 0.875rem;

    line-height: 1.75rem;

    --tw-text-opacity: 1;

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

[data-list-style='title-summary-1/2'] .post .content .info {

    display: grid
}

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

    [data-list-style='title-summary-1/2'] .post .content .info {

        row-gap: 1rem
    }
}

@media (min-width: 640px) {

    [data-list-style='title-summary-1/2'] .post .content .info {

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

        -moz-column-gap: 3rem;

             column-gap: 3rem
    }
}

[data-list-style='title-summary-1/2'] .post .content .info .header .tit {

    font-size: 2.25rem;

    font-weight: 800;

    line-height: 3rem;

    --tw-text-opacity: 1;

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

.dark [data-list-style='title-summary-1/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='title-summary-1/2'] .post .content .info .header .tit {

        font-size: 3rem;

        line-height: 1;

        line-height: 4rem
    }
}

[data-list-style='title-summary-1/2'] .post .content .info .summary {

    font-size: 0.875rem;

    line-height: 1.75rem;

    --tw-text-opacity: 1;

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

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

    font-size: 1.25rem;

    line-height: 1.75rem;

    font-weight: 800;

    --tw-text-opacity: 1;

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

.dark [data-list-style=title-summary-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=title-summary-2] .post .content .info .header .tit {

        font-size: 1.5rem;

        line-height: 2rem
    }
}

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

    margin-top: 1rem;

    font-size: 0.875rem;

    line-height: 1.75rem;

    --tw-text-opacity: 1;

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

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

    line-height: 2rem;

    --tw-text-opacity: 1;

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

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

    --tw-text-opacity: 1;

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

[data-list-style='summary-title-1/2'] .post .content .info {

    display: grid;

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

[data-list-style='summary-title-1/2'] .post .content .info .header .tit {

    --tw-text-opacity: 1;

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

[data-list-style='summary-title-1/2'] .post .content .info .summary {

    line-height: 2rem;

    --tw-text-opacity: 1;

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

.dark [data-list-style='summary-title-1/2'] .post .content .info .summary {

    --tw-text-opacity: 1;

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

/********** BUTTON **********/

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

    box-sizing: border-box;

    border-radius: 44px;

    border-width: 2px;

    padding-left: 1.5rem;

    padding-right: 1.5rem;

    padding-top: 0.75rem;

    padding-bottom: 0.75rem;

    font-size: 0.875rem;

    line-height: 1.25rem
}

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

    display: flex;

    height: 100%;

    width: 100%;

    flex-direction: column;

    align-items: center;

    justify-content: center
}

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

    font-weight: 700
}

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

    --tw-border-opacity: 1;

    border-color: rgb(41 42 45 / var(--tw-border-opacity));

    --tw-bg-opacity: 1;

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

    --tw-text-opacity: 1;

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

.dark [data-list-style=button] .post:nth-child(2n+1) {

    --tw-border-opacity: 1;

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

    --tw-bg-opacity: 1;

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

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

    --tw-border-opacity: 1;

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

    --tw-text-opacity: 1;

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

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

    --tw-border-opacity: 1;

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

    --tw-bg-opacity: 1;

    background-color: rgb(30 31 33 / var(--tw-bg-opacity));

    --tw-text-opacity: 1;

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

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

    --tw-text-opacity: 1;

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

.dark [data-list-style=link] .post {

    --tw-text-opacity: 1;

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

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

    font-weight: 700;

    text-decoration-line: underline
}

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

    border-radius: 0.375rem;

    padding-top: 0.5rem;

    padding-bottom: 0.5rem;

    padding-left: 1rem;

    padding-right: 1rem;

    text-align: center;

    font-size: 0.875rem;

    line-height: 1.25rem;

    transition-duration: 200ms;

    --tw-bg-opacity: 1;

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

    --tw-text-opacity: 1;

    color: rgb(102 102 110 / var(--tw-text-opacity))
}

[data-list-style=keyword] .post:hover {

    --tw-bg-opacity: 1;

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

    --tw-text-opacity: 1;

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

.dark [data-list-style=keyword] .post {

    --tw-bg-opacity: 1;

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

    --tw-text-opacity: 1;

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

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

    --tw-bg-opacity: 1;

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

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

    display: flex;

    height: 100%;

    width: 100%;

    flex-direction: column;

    align-items: center;

    justify-content: center
}