main:has(.profile-listing.profile-page) {
    background-color: var(--bg-primary);
    z-index: 0;
    gap: 10px;
    .profile-listing:not(.profile-listing-home) {
        background-color: var(--bg-secondary);
        z-index: 0;
        position: relative;
        .profile-cover-img {
            aspect-ratio: 16/9;
			aspect-ratio: 600/257;

            .info-wrap {
                display: flex;
            }
        }
        
    }

    .profile-subscription {
        padding: 20px;
        background-color: var(--bg-secondary);
        display: flex;
        flex-direction: column;
        gap: 10px;
        
        * {
            margin: 0;
            padding: 0;
        }

        .subscribe-btn {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            padding: 20px;
            text-decoration: none;
            font-weight: 500;
            font-style: Medium;
            font-size: 15px;
            leading-trim: NONE;
            line-height: 140%;
            letter-spacing: 0%;
            vertical-align: middle;
            background: var(--primary-color);
            color: var(--bg-secondary);
            border-radius: 50px;
        }

        .subscribe-btn.message {
            text-transform: uppercase;
            justify-content: center !important;
        }
    }

    .tabbed-content {
        position: relative;
        .tabbed-header {
            display: flex;
            background-color: var(--bg-secondary);
            .tab {
                padding: 20px;
                flex-grow: 1;
                text-decoration: none;
                text-align: center;
                font-family: Roboto;
                font-weight: 500;
                font-style: Medium;
                font-size: 15px;
                leading-trim: NONE;
                line-height: 140%;
                letter-spacing: 0%;
                vertical-align: middle;
                text-transform: uppercase;
                color: var(--text-primary);
				border-bottom: 2px solid transparent;
                cursor: pointer;

                &.active {
                    color: var(--text-secondary);
					border-bottom: 2px solid var(--text-primary);
                }
            }
        }
        .content {
            .photos,
            .videos {
                display: none;
                &.active {
                    display: flex;
                    flex-direction: column;
                    gap: 0;
                }

                .f4u-videos-grid,
                .f4u-photos-grid,
                .f4u-videos-grid-blurred,
                .f4u-photos-grid-blurred {
                    width: 100%;
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 1px;

                    .f4u-video-item,
                    .f4u-photo-item {
                        position: relative;
                        aspect-ratio: 1/1;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 1024px) {
    
}

@media (max-width: 768px) {
  main:has(.profile-listing.profile-page) {
    .tabbed-content {
      .content {
        .photos,
        .videos {
            .f4u-videos-grid,
            .f4u-photos-grid,
            .f4u-videos-grid-blurred,
            .f4u-photos-grid-blurred  {
                grid-template-columns: 1fr;
            }
        }
      }
    }
  }
}

@media (max-width: 480px) {}

@media (max-width: 375px) {}