@layer theme {

    .templateHomepageCover {
        height: 100vh;

        .container {
            overflow: inherit;
            padding-top: 0;
            background: none;
            padding-bottom: calc(var(--section) * 2);
            @media (max-width: 90em) {
                padding-bottom: calc(var(--section) * 1);
            }
            @media (--max-desktop) {
                padding-bottom: calc(var(--section) * 1);
            }
        }
        .media {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 0;
            
            img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                visibility: hidden;
            }

            &:before {
                background: #000;
                content: "";
                height: 100%;
                left: 0;
                opacity: .2;
                position: absolute;
                top: 0;
                width: 100%;
                z-index: 100;
            }
        }
        .inner {
            grid-column: span 8;
            z-index: 100;
            justify-content: flex-end;
            overflow: initial;
        }
        .block {
            background: none;
            z-index: 1;
            .header {
                position: relative;
                padding-bottom: var(--gutter);
                padding-top: 0;
                .title {
                    font-size: var(--xl-fontsize);
                    line-height: var(--xl-lineheight);
                    color: #fff;
                    position: absolute;
                    bottom:var(--padding);
                    opacity: 0;
                    visibility: hidden;
                }
            }
            .content {
                @media (min-width: 56em) {
                    display: flex;
                }
                @media (--min-fablet) {
                    display: flex;
                }
                .filters {
                    margin-bottom: var(--padding);
                    display: flex;
                    align-items: center;
            
                    @media (max-width: 56em) {
                        flex-wrap: wrap;
                        flex-direction: column;
                    }
            
                    @media (--max-fablet) {
                        flex-wrap: wrap;
                        flex-direction: column;
                    }
                    
                    .filterCategory {
                        position: relative;
                        background: #fff;
                        overflow: hidden;

                        @media (max-width: 56em) {
                            width: 100%;
                        }

                        @media (--max-fablet) {
                            width: 100%;
                        }

                        @media (min-width: 56em) {
                            select {
                                text-overflow: ellipsis;
                            }
                        }

                        @media (--min-fablet) {
                            select {
                                text-overflow: ellipsis;
                            }
                        }
                            

                        &:after {
                            content: "";
                            display: block;
                            position: absolute;
                            left: 0;
                            top: 50%;
                            transform: translateY(-50%);
                            height: 35px;
                            width: 2px;
                            background-color: var(--color2);
                            @media (max-width: 56em) {
                                width: calc(100% - (var(--form-input-size) * 2));
                                height: 1px;
                                top: 0;
                                left: 50%;
                                transform: translateX(-50%);
                            }
                            @media (--max-fablet) {
                                width: calc(100% - (var(--form-input-size) * 2));
                                height: 1px;
                                top: 0;
                                left: 50%;
                                transform: translateX(-50%);
                            }
                        }
                        
                        &:first-of-type {
                            border-top-left-radius: var(--border-radius);
                            border-bottom-left-radius: var(--border-radius);
                            overflow: hidden;

                            @media (max-width: 56em) {
                                border-top-left-radius: var(--border-radius);
                                border-top-right-radius: var(--border-radius);
                                border-bottom-left-radius: 0;
                                border-bottom-right-radius: 0;
                            }

                            @media (--max-fablet) {
                                border-top-left-radius: var(--border-radius);
                                border-top-right-radius: var(--border-radius);
                                border-bottom-left-radius: 0;
                                border-bottom-right-radius: 0;
                            }

                            &:after {
                                display: none;
                            }
                        }
                        
                        @media (min-width: 56em) {
                            &:first-of-type {
                                border-top-left-radius: var(--border-radius);
                                border-bottom-left-radius: var(--border-radius);
                            }
                        }
                        
                        @media (--min-fablet) {
                            &:first-of-type {
                                border-top-left-radius: var(--border-radius);
                                border-bottom-left-radius: var(--border-radius);
                            }
                        }
                        @media (max-width: 56em) {
                            &:first-of-type {
                                border-top-left-radius: var(--border-radius);
                                border-top-right-radius: var(--border-radius);
                            }
                        }
                        @media (--max-fablet) {
                            &:first-of-type {
                                border-top-left-radius: var(--border-radius);
                                border-top-right-radius: var(--border-radius);
                            }
                        }

                        input, select {
                            border-radius: 0;
                            border: 0;
                        }

                        input {
                            @media (min-width: 56em) {
                                max-width: 160px;
                                min-width: 160px;
                            }
                            @media (--min-fablet) {
                                max-width: 160px;
                                min-width: 160px;
                            }
                        }
                    }
                    .filterButton {
                        @media (max-width: 56em) {
                            width: 100%;
                        }
                        @media (--max-fablet) {
                            width: 100%;
                        }
                        .button {
                            justify-content: center;
                            white-space: nowrap;
                            height: 55px;
                            border-top-left-radius: 0;
                            border-bottom-left-radius: 0;
                            min-height: 30px;
                            padding-top: var(--form-input-size);
                            padding-bottom: var(--form-input-size);
                            @media (max-width: 56em) {
                                border-top-left-radius: 0;
                                border-top-right-radius: 0;
                                border-bottom-left-radius: var(--border-radius);
                                border-bottom-right-radius: var(--border-radius);
                            }
                            @media (--max-fablet) {
                                border-top-left-radius: 0;
                                border-top-right-radius: 0;
                                border-bottom-left-radius: var(--border-radius);
                                border-bottom-right-radius: var(--border-radius);
                            }
                        }
                    }
                }
            }
            .footer {
                .button {
                    color: #fff;
                    font-weight: bold;
                    text-decoration: none;
                    padding-bottom: 6px;
                    &:before {
                        position: absolute;
                        bottom: 0;
                        content: "";
                        width: 100%;
                        height: 2px;
                        transition: var(--transition);
                    }
                    &:after {
                        display: none;
                    }
                    &:hover {
                        @media (hover: hover) {
                            &:before {
                                background:#fff;
                            }
                        }
                    }
                }
            }
        }
    }
}