main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;

    > figure {
        margin: 0 auto;
        width: fit-content;
        align-self: flex-end;
    }

    > div {
        max-width: 500px;
        width: 100%;
        margin: 0 auto;
        align-self: flex-start;

        form {
            display: flex;
            flex-flow: column;
            align-items: center;
    
            > * {
                position: relative;
                width: 100%;
                display: flex;
                flex-flow: column;
    
                label {
                    padding: 0.75rem 0 0.3rem 0;
                    display: block;

                    span {
                        color: rgb(71, 71, 71)
                    }
                }
                
                input, select {
                    padding: 0.75rem 1rem;
                    border: 1px solid black;
                    border-radius: 50px;
    
                    ::placeholder {
                        font-family: var(--font);
                    }
                }

                > a {
                    position: absolute;
                    top: 100%;
                    right: 0;
                }

                &.switch_language {
                    display: grid;
                    grid-template-columns: 3fr 1fr;
                    gap: 24px;

                    > div {
                        position: relative;

                        * {
                            width: 100%;
                        }
                    }

                    > div {
                        .selector_style {
                            cursor: pointer;
                            text-align: left;
                            background: white;
                        }

                        div:has(.selector_style) {
                            position: relative;

                            option-div {
                                position: absolute;
                                background: white;
                                overflow: hidden;
                                top: 100%;
                                display: none;
                                transition: opacity 0.5s;
                                border-radius: 10px;
                                z-index: 27;

                                height: fit-content;
                                width: fit-content;
                                border: 1px solid black;
                                
                                a {
                                    padding: 0.5rem 1rem;
                                    display: flex;
                                    align-items: center;
                                    flex-flow: row nowrap;
                                    gap: 8px;

                                    img {
                                        height: 15px;
                                        width: 15px;
                                        display: inline;
                                    }

                                    &:hover {
                                        background: #bebebe;
                                    }
                                }
                            }

                            &::after {
                                content: "⮟";
                                position: absolute;
                                height: 20px;
                                bottom: 0.75rem;
                                right: 1em;
                                pointer-events: none;
                                transition: transform 0.5s;
                            }
                        }
                        

                        div.open:has(.selector_style) {
                            option-div {
                                display: block;
                            }

                            &::after {
                                transform: rotate(180deg);
                            }
                        }
                        
                    }
                }

                &.two_inputs {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 32px;

                    > div {
                        * {
                            width: 100%;
                        }

                    }
                }

                &.double_button {
                    display: flex;
                    flex-flow: row;
                    gap: 32px;
                }
            }
    
            button, .button {
                margin-top: 1rem;
                padding: 0.75rem 2rem;
                width: fit-content;
                align-self: flex-start;
                border-radius: 50px;
                background: black;
                color: white;
                cursor: pointer;
                position: relative;

                &.off_button {
                    background: rgb(207, 207, 207);
                    color: rgb(0, 0, 0);
                }
            }
        }

        p {
            margin-top: 1rem;
        }
    }

    
    @media (width > 980px) {
        grid-template-columns: 1fr 1fr;
        align-items: center;

        > figure, > div {
            align-self: center;
        }
    }
}