main:has(.browse-profiles) {

    display: flex;
    flex-direction: column;

    .search-wrapper {
        margin: 20px;
        margin-top: 0;
        position: relative;

        input {
            width: 100%;
            font-family: Roboto;
            font-weight: 400;
            font-style: Regular;
            font-size: 15px;
            leading-trim: NONE;
            line-height: 140%;
            letter-spacing: 0%;
            vertical-align: middle;
            color: var(--text-secondary);
            padding: 10px;
            border-radius: 6px;
            border: 1px solid var(--border-color);
            width: 100%;
            background: var(--bg-secondary);

             &::placeholder {
                color: var(--text-secondary);
              }

            &:focus {
                outline: none;
            }
        }

        svg {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    .browse-profiles {
        padding: 0 20px;
        padding-bottom: 20px;
        /* background-color: var(--bg-primary); */
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* flex-direction: column; */
        gap: 10px;

            .browse-profile {
                aspect-ratio: 4/3;
                border-radius: 6px;
                background: var(--bg-placeholder);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                overflow: hidden;
                background-image: url(/assets/images/suggested-profile-cover.jpg);
                background-position: center center;
                background-size: cover;
                .badge {
                    margin: 10px;
                    font-weight: 500;
                    font-style: Medium;
                    font-size: 12px;
                    leading-trim: NONE;
                    line-height: 100%;
                    letter-spacing: 0%;
                    vertical-align: middle;
                    color: #fff;
                    background: #8996A380;
                    padding: 5px 10px;
                    border-radius: 25px;
                    width: fit-content;
                    &.free {
                        backdrop-filter: blur(10px);
                    }
                    &.premium {
                        background: var(--badge-premium);
                        backdrop-filter: blur(15px);
                        &::before {
                            margin-right: 5px;
                            content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxNCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjA0MjMgMy4wNDQzM0MxMy4wNDI1IDIuODA2MDIgMTIuOTg2NyAyLjU3MDk5IDEyLjg3OTUgMi4zNTgxOEMxMi43NzIyIDIuMTQ1MzcgMTIuNjE2NSAxLjk2MDczIDEyLjQyNDggMS44MTkxNEMxMi4yMzMxIDEuNjc3NTQgMTIuMDEwOCAxLjU4Mjk1IDExLjc3NTkgMS41NDI5OUMxMS41NDEgMS41MDMwMyAxMS4yOTk5IDEuNTE4OCAxMS4wNzIyIDEuNTg5MDVDMTAuODQ0NSAxLjY1OTMgMTAuNjM2NSAxLjc4MjA2IDEwLjQ2NDkgMS45NDc0M0MxMC4yOTMzIDIuMTEyODEgMTAuMTYyOSAyLjMxNjE3IDEwLjA4NDMgMi41NDExNUMxMC4wMDU3IDIuNzY2MTIgOS45ODEwNyAzLjAwNjQxIDEwLjAxMjMgMy4yNDI2NkMxMC4wNDM2IDMuNDc4OTEgMTAuMTI5OSAzLjcwNDUxIDEwLjI2NDQgMy45MDEyOUw4LjgwODU3IDUuNjk0NTVMNy40OTk0OSAyLjY4NTY3QzcuNzM4MjQgMi40ODQ3MyA3LjkwOTQzIDIuMjE1MjMgNy45ODk4NiAxLjkxMzcyQzguMDcwMjkgMS42MTIyIDguMDU2MDcgMS4yOTMyNSA3Ljk0OTEyIDEuMDAwMDlDNy44NDIxNyAwLjcwNjkyNiA3LjY0NzY3IDAuNDUzNzQgNy4zOTE5OCAwLjI3NDg0NUM3LjEzNjI5IDAuMDk1OTUwMyA2LjgzMTc3IDAgNi41MTk3MSAwQzYuMjA3NjUgMCA1LjkwMzE0IDAuMDk1OTUwMyA1LjY0NzQ1IDAuMjc0ODQ1QzUuMzkxNzYgMC40NTM3NCA1LjE5NzI2IDAuNzA2OTI2IDUuMDkwMzEgMS4wMDAwOUM0Ljk4MzM2IDEuMjkzMjUgNC45NjkxNCAxLjYxMjIgNS4wNDk1NyAxLjkxMzcyQzUuMTMgMi4yMTUyMyA1LjMwMTE5IDIuNDg0NzMgNS41Mzk5NCAyLjY4NTY3TDQuMjM0MTIgNS42OTI5MkwyLjc3ODMyIDMuODk5NjZDMi45NjUzMyAzLjYyNTY0IDMuMDU3NjYgMy4yOTgwMSAzLjA0MTI1IDIuOTY2NjZDMy4wMjQ4MyAyLjYzNTMyIDIuOTAwNTggMi4zMTg0MiAyLjY4NzQgMi4wNjQyMkMyLjQ3NDIyIDEuODEwMDMgMi4xODM4MSAxLjYzMjQ3IDEuODYwMzkgMS41NTg2QzEuNTM2OTcgMS40ODQ3MiAxLjE5ODI3IDEuNTE4NTcgMC44OTU4NjMgMS42NTQ5OUMwLjU5MzQ2MSAxLjc5MTQxIDAuMzQzOTMxIDIuMDIyOTMgMC4xODUyNzcgMi4zMTQyOUMwLjAyNjYyMjcgMi42MDU2NCAtMC4wMzI0NjA4IDIuOTQwODcgMC4wMTcwMjQ1IDMuMjY4OTFDMC4wNjY1MDk4IDMuNTk2OTQgMC4yMjE4NTIgMy44OTk4MiAwLjQ1OTM5MyA0LjEzMTQxQzAuNjk2OTMzIDQuMzYzIDEuMDAzNjYgNC41MTA2IDEuMzMyODQgNC41NTE3NUwyLjExOTcgOS4yNzM0NkMyLjE1MzUzIDkuNDc2NDYgMi4yNTgyNyA5LjY2MDg3IDIuNDE1MjggOS43OTM5MUMyLjU3MjMgOS45MjY5NCAyLjc3MTQxIDkuOTk5OTcgMi45NzcyMSAxMEgxMC4wNjU1QzEwLjI3MTMgOS45OTk5NyAxMC40NzA0IDkuOTI2OTQgMTAuNjI3NCA5Ljc5MzkxQzEwLjc4NDQgOS42NjA4NyAxMC44ODkyIDkuNDc2NDYgMTAuOTIzIDkuMjczNDZMMTEuNzA5MyA0LjU1MzkyQzEyLjA3NzMgNC41MDc5NyAxMi40MTU4IDQuMzI5MiAxMi42NjEzIDQuMDUxMjFDMTIuOTA2NyAzLjc3MzIzIDEzLjA0MjIgMy40MTUxNyAxMy4wNDIzIDMuMDQ0MzNaTTYuNTIxMzQgMC44NzA2NzdDNi42NTAzMiAwLjg3MDY3NyA2Ljc3NjM5IDAuOTA4OTIxIDYuODgzNjMgMC45ODA1NzRDNi45OTA4NiAxLjA1MjIzIDcuMDc0NDQgMS4xNTQwNyA3LjEyMzggMS4yNzMyM0M3LjE3MzE2IDEuMzkyMzggNy4xODYwNyAxLjUyMzQ5IDcuMTYwOTEgMS42NDk5OUM3LjEzNTc1IDEuNzc2NDggNy4wNzM2NCAxLjg5MjY3IDYuOTgyNDQgMS45ODM4N0M2Ljg5MTI1IDIuMDc1MDcgNi43NzUwNSAyLjEzNzE3IDYuNjQ4NTYgMi4xNjIzNEM2LjUyMjA3IDIuMTg3NSA2LjM5MDk1IDIuMTc0NTggNi4yNzE4IDIuMTI1MjNDNi4xNTI2NCAyLjA3NTg3IDYuMDUwOCAxLjk5MjI5IDUuOTc5MTUgMS44ODUwNkM1LjkwNzQ5IDEuNzc3ODIgNS44NjkyNSAxLjY1MTc0IDUuODY5MjUgMS41MjI3N0M1Ljg2OTI1IDEuMzQ5ODIgNS45Mzc5NSAxLjE4Mzk2IDYuMDYwMjQgMS4wNjE2N0M2LjE4MjUzIDAuOTM5Mzc5IDYuMzQ4NCAwLjg3MDY3NyA2LjUyMTM0IDAuODcwNjc3Wk0wLjg2OTg1NyAzLjA0NDMzQzAuODY5ODU3IDIuOTE1MzUgMC45MDgxMDIgMi43ODkyOCAwLjk3OTc1NSAyLjY4MjA0QzEuMDUxNDEgMi41NzQ4IDEuMTUzMjUgMi40OTEyMiAxLjI3MjQxIDIuNDQxODdDMS4zOTE1NiAyLjM5MjUxIDEuNTIyNjggMi4zNzk2IDEuNjQ5MTcgMi40MDQ3NkMxLjc3NTY2IDIuNDI5OTIgMS44OTE4NiAyLjQ5MjAzIDEuOTgzMDUgMi41ODMyMkMyLjA3NDI1IDIuNjc0NDIgMi4xMzYzNiAyLjc5MDYxIDIuMTYxNTIgMi45MTcxMUMyLjE4NjY4IDMuMDQzNiAyLjE3Mzc2IDMuMTc0NzIgMi4xMjQ0MSAzLjI5Mzg3QzIuMDc1MDUgMy40MTMwMyAxLjk5MTQ3IDMuNTE0ODcgMS44ODQyNCAzLjU4NjUyQzEuNzc3IDMuNjU4MTggMS42NTA5MiAzLjY5NjQyIDEuNTIxOTUgMy42OTY0MkMxLjM0OTAxIDMuNjk2NDIgMS4xODMxNCAzLjYyNzcyIDEuMDYwODUgMy41MDU0M0MwLjkzODU2IDMuMzgzMTMgMC44Njk4NTcgMy4yMTcyNyAwLjg2OTg1NyAzLjA0NDMzWk0xMC4wNjU1IDkuMTMwNTRIMi45NzcyMUwyLjIyMDc4IDQuNTk0MTRMNC4wMTAyNCA2Ljc5Mzg3QzQuMDUwNzcgNi44NDQ0OSA0LjEwMjExIDYuODg1NCA0LjE2MDUgNi45MTM2MUM0LjIxODg5IDYuOTQxODIgNC4yODI4NSA2Ljk1NjYxIDQuMzQ3NjkgNi45NTY4OUM0LjM2NzMyIDYuOTU2OTggNC4zODY5MyA2Ljk1NTcxIDQuNDA2MzggNi45NTMwOUM0LjQ4MDQ0IDYuOTQzMDIgNC41NTA2NiA2LjkxNDAzIDQuNjEwMjUgNi44Njg5MUM0LjY2OTgzIDYuODIzNzkgNC43MTY3OCA2Ljc2NDA3IDQuNzQ2NTYgNi42OTU1MUw2LjMzODc2IDMuMDMyOTFDNi40NjAwMSAzLjA0ODEyIDYuNTgyNjggMy4wNDgxMiA2LjcwMzkzIDMuMDMyOTFMOC4yOTYxMyA2LjY5NTUxQzguMzI1OSA2Ljc2NDA3IDguMzcyODUgNi44MjM3OSA4LjQzMjQ0IDYuODY4OTFDOC40OTIwMyA2LjkxNDAzIDguNTYyMjQgNi45NDMwMiA4LjYzNjMgNi45NTMwOUM4LjY1NTc2IDYuOTU1NzEgOC42NzUzNiA2Ljk1Njk4IDguNjk0OTkgNi45NTY4OUM4Ljc1OTg0IDYuOTU2NjEgOC44MjM4IDYuOTQxODIgOC44ODIxOSA2LjkxMzYxQzguOTQwNTggNi44ODU0IDguOTkxOTIgNi44NDQ0OSA5LjAzMjQ1IDYuNzkzODdMMTAuODIxOSA0LjU5MTk2TDEwLjA2NTUgOS4xMzA1NFpNMTEuNTIwNyAzLjY5NjQyQzExLjM5MTggMy42OTY0MiAxMS4yNjU3IDMuNjU4MTggMTEuMTU4NSAzLjU4NjUyQzExLjA1MTIgMy41MTQ4NyAxMC45Njc2IDMuNDEzMDMgMTAuOTE4MyAzLjI5Mzg3QzEwLjg2ODkgMy4xNzQ3MiAxMC44NTYgMy4wNDM2IDEwLjg4MTIgMi45MTcxMUMxMC45MDYzIDIuNzkwNjEgMTAuOTY4NCAyLjY3NDQyIDExLjA1OTYgMi41ODMyMkMxMS4xNTA4IDIuNDkyMDMgMTEuMjY3IDIuNDI5OTIgMTEuMzkzNSAyLjQwNDc2QzExLjUyIDIuMzc5NiAxMS42NTExIDIuMzkyNTEgMTEuNzcwMyAyLjQ0MTg3QzExLjg4OTQgMi40OTEyMiAxMS45OTEzIDIuNTc0OCAxMi4wNjI5IDIuNjgyMDRDMTIuMTM0NiAyLjc4OTI4IDEyLjE3MjggMi45MTUzNSAxMi4xNzI4IDMuMDQ0MzNDMTIuMTcyOCAzLjIxNzI3IDEyLjEwNDEgMy4zODMxMyAxMS45ODE4IDMuNTA1NDNDMTEuODU5NSAzLjYyNzcyIDExLjY5MzcgMy42OTY0MiAxMS41MjA3IDMuNjk2NDJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
                        }
                    }
                }
                
                .browse-profile-info {
                    padding: 10px;
                    background: var(--overlay-primary);
                    backdrop-filter: blur(10px);
                    display: flex;
                    gap: 10px;
                    flex-wrap: wrap;
                    align-items: center;
                    .info {
                        width: calc (100% - 50px);
                        .profile-name {
                            font-weight: 500;
                            font-style: Medium;
                            font-size: 15px;
                            leading-trim: NONE;
                            line-height: 140%;
                            letter-spacing: 0%;
                            vertical-align: middle;
                            color: #fff;

                            display: flex;
                            gap: 5px;
                            align-items: center;
                        }
                        .username {
                            font-weight: 400;
                            font-style: Regular;
                            font-size: 12px;
                            leading-trim: NONE;
                            line-height: 140%;
                            letter-spacing: 0%;
                            vertical-align: middle;
                            color: #fff;
                        }
                    }
                }
            }
        }
}

@media (max-width: 1024px) {
    main:has(.browse-profiles) {
        .browse-profiles {
            grid-template-columns: repeat(4, 1fr);
        }
    }
}

@media (max-width: 768px) {
    main:has(.browse-profiles) {
        .browse-profiles {
            grid-template-columns: repeat(3, 1fr);
            .browse-profile {
                aspect-ratio: 1/1;
            }
        }
    }
}

@media (max-width: 480px) {
    main:has(.browse-profiles) {
        .browse-profiles {
            grid-template-columns: repeat(2, 1fr);
            
        }
    }
}

@media (max-width: 375px) {
    main:has(.browse-profiles) {
        .browse-profiles {
            /* grid-template-columns: repeat(1, 1fr); */
            
        }
    }
}