.favorite { overflow: hidden; position: relative; height: 100%; padding-top: 80px; background: linear-gradient(to bottom, #192640, rgba(148, 168, 206, 0)); }
.favorite::before, .favorite::after { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; mix-blend-mode: multiply; filter: brightness(60%) contrast(100%); }
.favorite::before { background: #000; filter: url(#noise); width: 83.2%; margin-left: 8.5%; }
.favorite::after { background: url(../img/texture.png) repeat-y center center / 100%; } 
/*=========================================================
LAYOUT ↓
========================================================= */
.favorite .item { overflow: hidden; position: relative; z-index: 1; width: 100%; padding-bottom: 80px; font-family: var(--font-nanum); }
.favorite .item h1 { position: relative; font-size: var(--font-x-large); color: var(--color-green); }
.favorite .item h1::after { content: ''; position: absolute; bottom: 0; left: 0; background-color: var(--color-green); }
.favorite .item h1.red { color: var(--color-lightred); }
.favorite .item h1.red::after { content: ''; position: absolute; bottom: 0; left: 0; background-color: var(--color-red); }
.favorite .item .item-wrapper { display: flex; flex-wrap: wrap; gap: 1em; align-content: center; justify-content: center; }
.favorite .item .item-wrapper .item-wrap { color: var(--text-disabled); }
.favorite .item .item-wrapper .item-wrap > figure { position: relative; width: 100%; overflow: hidden; line-height: 0; }
.favorite .item .item-wrapper .item-wrap > figure > img { width: 100%; transform: scale(1.2); transition: transform .5s, filter .8s; filter: grayscale(100%); }
.favorite .item .item-wrapper .item-wrap > figure > img:hover { transform: scale(1); filter: grayscale(0); }
.favorite .item .item-wrapper .item-wrap > figure > img:active { filter: saturate(150%); }
.favorite .item .item-wrapper .item-wrap > figure > figcaption { position: absolute; top: 0; right: 0; padding: 1em 2em; font-size: var(--font-medium); background: rgba(0, 0, 0, .5); letter-spacing: 1.25px; }
.favorite .item .item-wrapper .item-wrap > p { display: inline-block; width: 90%; margin: .5em; font-size: var(--font-large); color: var(--text-disabled); line-height: normal; text-align: justify; }
.favorite .item .item-wrapper .item-wrap > p span { display: block; color: var(--color-green); }

@media only screen and (min-width: 1350px) {
    .favorite .item h1 { height: 80px; }
    .favorite .item h1::after { width: 80px; height: 18px;  }
}
@media only screen and (max-width: 1350px) {
    .favorite .item h1 { height: 60px; }
    .favorite .item h1::after { width: 70px; height: 14px; }
}
@media only screen and (max-width: 805px) {
    .favorite .item h1 { margin: 1em 0 0.5em 1.5em; }
    .favorite .item .item-wrapper { flex-direction: column; }
    .favorite .item .item-wrapper .item-wrap { width:80%; }
    .favorite .item h1::after { height: 14px; }
}