:host {
    display: flex !important;
    flex-direction: column;
    align-items: normal;

    >form {
        position: relative;
        display: grid;
        grid-template-columns: 1fr auto;
        width: fit-content;
        margin: auto;
        font-size: 1.2rem;
        line-height: 2;
        background: var(--content);
        border-radius: 5em;
        overflow: hidden;
        gap: 1rem;
        padding: .25rem;
        z-index: 0;
        gap: 2em;
        margin-bottom: 3rem;
        order: -1;

        .selects {
            position: relative;
            display: grid;
            grid-auto-flow: column;
            line-height: inherit;
            z-index: 0;
            --index: 0;
            --select-count: 4;
            gap: 1em;

            &::before {
                position: absolute;
                content: '';
                background: var(--red);
                height: 100%;
                width: 100%;
                transition: .2s;
                grid-column: 1;
                width: calc(100% / var(--select-count));
                z-index: -1;
                border-radius: 1em;
                left: calc(var(--index) * (100% / var(--select-count)));
            }

            >select {
                appearance: none;
                width: 10rem;
                height: 100%;
                font-size: inherit;
                background: none;
                border: none;
                line-height: inherit;
                text-align: center;
                font-weight: 300;
                font-family: inherit;
                color: var(--background);
                outline: none;
                transition: color .2s ease;
                cursor: pointer;
                box-sizing: border-box;
                padding-inline: .5rem;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            >select[active],
            &:not(:has(select[active])) :first-child {
                color: white;

                >option {
                    color: black;
                }
            }
        }

        .search {
            height: 100%;
            z-index: 0;


            >button {
                position: relative;
                padding: 0;
                height: 100%;
                aspect-ratio: 1;
                background: var(--red);
                border: none;
                font-size: inherit;
                border-radius: 1em;
                mask-image: url(/icons/search.svg);
                mask-size: 50%;
                mask-position: center;
                mask-repeat: no-repeat;
                margin-right: .25em;
                cursor: pointer;
                z-index: 1;
            }

            >input {
                background: var(--content);
                position: absolute;
                padding-right: 3em;
                padding-left: 1em;
                width: 0;
                height: 100%;
                border: none;
                outline: none;
                right: 0;
                transition: width .2s ease;
                z-index: 0;
                box-sizing: border-box;
                font-size: inherit;
                top: 0;
            }

            &:has(input:focus) {
                input {
                    width: 100%;
                }
            }
        }
    }

    >section {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        
        >arrow-content {
            margin-top: 4rem;
        }

        

        >h2 {
            font-size: 1.875rem;
            font-weight: 300;
            line-height: 1.2;
            text-align: center;
            margin-bottom: 1rem;

            &:not(:first-of-type) {
                margin-top: 4rem;
            }
        }

        >a {
            display: block;
            text-align: center;
            font-size: 1.3rem;
            text-decoration: none;
            color: inherit;
            line-height: 1.4;
            font-weight: 200;
            transition: font-weight .2s;

            &:hover {
                font-weight: 400;
            }
        }
    }
}