.grid {
     column-count: 4;
     gap: 10px;
     max-width: 1000px;
     margin: auto;
 }

 .pfCard {
     position: relative;
     overflow: hidden;
     border-radius: 20px;
     cursor: pointer;
     background: #ddd;
     transition: transform .25s ease;
     break-inside: avoid;
     margin-bottom: 0;
     margin-bottom: 10px;
     width: 100%;
 }

 .folio {
     height: 230px !important;
     background-image: none !important;
 }


 .folio p {
     color: black !important;
     font-size: 20px !important;
     text-align: center;
     margin: 0;
 }


 .folio h1 {
     color: #6377e9 !important;
     text-shadow: none !important;
     margin: 0;
 }


 .pfCard:hover {
     transform: translateY(-4px);
 }

 .pfCard.square {
     aspect-ratio: 4/6;
 }

 .pfCard.vertical {
     aspect-ratio: 9/16;
 }

 .pfCard.portrait {
     aspect-ratio: 9/16;
 }

 .poster {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .overlay {
     position: absolute;
     inset: auto 0 0 0;
     padding: 24px;
     -webkit-mask-image: radial-gradient(circle, black 95%, transparent 100%);
     border: 1px solid rgba(255, 255, 255, 0.15);
     mask-image: radial-gradient(circle, black 95%, #ff2929 100%);
     backdrop-filter: blur(6px);
     color: white;
     text-shadow: 0 0 20px #000000;
     background: rgb(0 0 0 / 35%);
 }

 .logo {
     height: 38px;
     width: auto;
     filter: drop-shadow(2px 4px 16px black);
     display: flex;
     margin-bottom: 12px;
     align-items: center;
 }

 .brand {
     font-size: 1.2rem;
     font-weight: 600;
     margin-bottom: 6px;
 }

 .description {
     opacity: .9;
     font-size: .95rem;
 }

 .play-btn {
     position: absolute;
     top: 50%;
     left: 50%;
     box-shadow: 0 0 12px white;
     transform: translate(-50%, -50%);
     width: 70px;
     height: 70px;
     border: 2px solid #ffffff7a !important;
     border: none;
     border-radius: 999px;
     backdrop-filter: blur(3px);
     background: #ffffff61;
     color: #ffffffd4;
     font-size: 24px;
     cursor: pointer;
     box-shadow: 0 0px 25px #ffffff75;
 }

 .modal {

     position: fixed;
     inset: 0;

     background: rgba(0, 0, 0, .9);

     display: none;

     justify-content: center;
     align-items: center;

     z-index: 9999;

     padding: 20px;
 }

 .modal.active {
     display: flex;
 }

 .modal video {
     width: min(95vw, 500px);
     max-height: 90vh;
     border-radius: 20px;
     background: black;
 }

 .close {

     position: absolute;
     top: 25px;
     right: 25px;

     width: 50px;
     height: 50px;

     border: none;
     border-radius: 999px;

     font-size: 20px;
     cursor: pointer;
 }

 /*
            TAGS
        */
 .filters {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: center;
     margin-bottom: 30px;
 }

 .filter {
     border: none;
     padding: 10px 18px;
     border-radius: 999px;
     cursor: pointer;
     background: #fff;
     transition: .2s;
 }

 .filter:hover {
     transform: translateY(-2px);
 }

 .filter.active {
     background: #111;
     color: white;
 }

 .dropdown-filter {
     position: relative;
 }

 .filter-dropdown-btn {
     border: none;
     padding: 12px 20px;
     border-radius: 999px;
     font-size: 23px !important;
     font-weight: bo;
     color: #6377E9;
     cursor: pointer;
     background: white;
     box-shadow: 0 0 7px #6377E9;
     font-size: 16px;
     transition: ease-in-out 0.25s;
 }

 .filter-dropdown-btn:hover {
     box-shadow: 0px 0 12px #6377E9;
 }

 .filter-menu {
     position: absolute;
     top: calc(100% + 10px);
     left: 50%;
     transform: translateX(-50%);
     display: none;
     grid-template-columns: repeat(3, minmax(180px, 1fr));
     width: 700px;
     max-width: 90vw;
     background: white;
     border-radius: 15px;
     box-shadow: 0 10px 20px rgba(0, 0, 0, .12);
     overflow: hidden;
     z-index: 1000;
 }

 .filter-menu.open {
     display: grid;
     padding: 7px;
 }

 .filter-menu label {
     position: relative;
     display: flex;
     gap: 12px;
     cursor: pointer;
     padding: 2px 0;
     align-items: center;
     font-size: 16px;
     padding: 9px 12px;
     margin: 0 !important;
     z-index: 5;
 }

 .filter-menu label:has(input[type="checkbox"]:checked) {
     font-weight: bold;
 }

 .filter-menu label:hover {
     color: white;
     background: #6377E9;
 }

 .filter-menu label:first-child:hover {
     border-top-left-radius: 14px;
     border-top-right-radius: 14px;
 }

 .filter-menu label:last-child:hover {
     border-bottom-left-radius: 14px;
     border-bottom-right-radius: 14px;
 }


 /*
        TABLETS
 */

 @media all and (max-width: 1150px) {

     /* PORTFOLIO FILTERS MENU */
     .filter-menu.open {
         display: flex;
         padding: 7px;
         overflow-y: scroll;
         flex-flow: column;
         height: 200px;
     }

     .folio p {
         font-size: 17px !important;
         padding-bottom: 10px;
     }

 }

 @media all and (max-width: 900px) {

     .grid {
         display: flex;
         gap: 10px;
         max-width: 1000px;
         margin: auto;
         flex-flow: wrap;
         justify-content: center;
     }

     .pfCard {
         display: flex;
         margin-bottom: 10px;
         width: 400px;
     }

     .play-btn,
     .overlay {
         display: none;
     }

     .filter-menu label {
         padding: 12px 12px;
     }
 }