main.homeBiere {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    padding: 64px 0;
    min-height: calc(100vh - 107px);
    overflow: hidden;

    section.filter {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 112px;

        a {
            text-decoration: none;
            text-transform: uppercase;
            display: flex;
            justify-content: center;
            color: #000;
            font-weight: 600;
            font-size: 16px;
            line-height: 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
            width: fit-content;
            height: fit-content;

            &.selected {
                &::before {
                    opacity: 1;
                    transform: scaleX(150);
                }
            }

            &::before {
                transition: 300ms;
                content: "";
                position: absolute;
                bottom: 0;
                height: 1px;
                width: 1px;
                opacity: 0;
                background-color: #4d4d4d;
            }

            &:hover {
                &::before {
                    opacity: 1;
                    transform: scaleX(150);
                }
            }
        }
    }

    section.beers {
        width: 100vw;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 32px;

        div.row {
            width: fill-available;
            width: -moz-available;
            width: -webkit-fill-available;
            padding: 0 120px;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        > a,
        div.card {
            display: flex;
            flex-direction: column-reverse;
            align-items: center;
            position: relative;
            text-decoration: none;
            background-color: var(--secondary);
            width: 416px;
            height: 540px;
            border-radius: 24px;
            overflow: hidden;
            transition: all 300ms;

            img.beer {
                position: absolute;
                z-index: 10;
                top: 32px;
                height: 405px;
                width: fit-content;
                transition: all 300ms;
            }

            svg.gouteG {
                width: 80px;
                fill: var(--primary);
                position: absolute;
                left: 80px;
                bottom: 320px;
                transform: rotate(58deg);

            }

            svg.gouteD {
                width: 80px;
                fill: var(--primary);
                position: absolute;
                left: 264px;
                bottom: 180px;
                transform: scaleX(-1) rotate(44deg);
            }

            img.beast {
                height: 400px;
                width: fit-content;
                position: absolute;
                left: 0;
                z-index: 3;
                bottom: -100%;
                transition: all 300ms;
            }

            div.name {
                position: relative;
                z-index: 4;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 135px;
                background-color: var(--primary);
                color: #fff;

                img.shadow {
                    position: absolute;
                    top: 0;
                    right: 32px;
                    transition: all 300ms;
                }

                h2 {
                    text-transform: uppercase;
                    font-family: EDO;
                    font-size: 40px;
                    line-height: 44px;
                    transition: all 300ms;
                }

                h3 {
                    text-transform: uppercase;
                    font-size: 16px;
                    line-height: 21px;
                    transition: all 300ms;
                }
            }
        }

        > a:hover,
        div.card:hover {

            img.beer {
                transform: scale(0.8);
            }

            img.beast {
                transform: translate(0, -164%);
            }

            div.name {

                img.shadow {
                    transform: scale(0.8) translate(0, -56px);
                }

                h2 {
                    font-family: 'Switzer-Variable';
                    font-size: 16px;
                    line-height: 21px;
                }

                h3 {
                    font-family: EDO;
                    font-size: 40px;
                    line-height: 44px;
                }
            }
        }

        div.text {
            width: 40%;
            display: flex;
            flex-direction: column;
            gap: 32px;

            h2 {
                text-transform: uppercase;
                text-align: center;
                font-weight: 700;
                font-size: 32px;
                line-height: 40px;
            }

            p {
                max-width: 600px;
                font-size: 16px;
                line-height: 20px;
            }
        }
    }
}

@media (max-width: 800px) {

    main.homeBiere {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        padding: 32px 0;
        min-height: calc(100vh - 107px);

        section.filter {
            flex-wrap: wrap;
            gap: 16px;

            a {
                font-size: 12px;
                line-height: 16px;
            }
        }

        section.beers {
            gap: 32px;

            div.row {
                flex-direction: column;
                gap: 32px;
            }

            > a,
            div.row > div.card {
                width: 320px;
                height: 476px;

                img.beer {
                    top: 32px;
                    height: 320px;
                    width: fit-content;
                    object-fit: contain;
                }

                svg.gouteG {
                    width: 64px;
                    left: 64px;
                    bottom: 320px;
                }

                svg.gouteD {
                    width: 64px;
                    left: 210px;
                    bottom: 180px;
                }

                img.beast {
                    height: 320px;
                    bottom: -100%;
                }

                div.name {
                    text-align: center;

                    img.shadow {
                        transform: scale(0.8);
                    }

                    h2 {
                        font-size: 32px;
                        line-height: 38px;
                    }

                    h3 {
                        font-size: 14px;
                        line-height: 18px;
                    }
                }
            }

            > a:hover,
            row>div.card:hover {

                img.beer {
                    transform: scale(0.8);
                }

                img.beast {
                    transform: translate(0, -164%);
                }

                div.name {

                    img.shadow {
                        transform: scale(0.6) translate(0, -56px);
                    }

                    h2 {
                        font-size: 14px;
                        line-height: 18px;
                    }

                    h3 {
                        font-size: 32px;
                        line-height: 38px;
                    }
                }
            }

            div.text {
                width: 90vw;;
                display: flex;
                flex-direction: column;
                gap: 32px;
    
                h2 {
                    font-size: 24px;
                    line-height: 28px;
                }
    
                p {
                    max-width: 600px;
                    font-size: 12px;
                    line-height: 16px;
                }
            }
        }
    }
}