$c-prime: var(--e-global-color-primary, #000);
$c-sec: var(--e-global-color-secondary, #888);
$c-text: var(--e-global-color-text, #000);
$c-accent: var( --e-global-color-accent, #aaa);
$c-white: var( --e-global-color-4523687, #fff );

.pankaw{
    &-archive{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 30px;
        &-item{
            color: #000; //todo 
            width: 100%; 
             
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            
            
            border: 1px #aaa solid;
            box-shadow: -2px 2px 8px #aaa;
            
            a{
                text-decoration: none;
            }
            img{
                width: 100%;
                object-fit: cover;
                aspect-ratio: 2/1;
            }

            &--under{
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                padding: 15px 5px;
                color: #000;
                font-weight: 900;
                h3{
                    margin: 5px 0px;
                }
                &--price-for{
                    color: $c-accent;
                }
            }
        }
        &-button{
            border-radius: 0;
            padding: 5px 15px;
            border: 0;
            background-color: $c-accent;
            color: $c-white;
            text-align: center;
            
        }
    }
    &-form{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;

        &-input input{
            font-size: 1em;
            height: 2em;
            width: 100%;
            background-color: transparent;
            padding: 5px 0;
            border: 0;
            border-bottom: 1px $c-text solid;
            border-radius: 0;
        }
        &-input textarea{
            height: 4em;
        }

        .col2{
            grid-column: 1 / span 2;
        }
        &-info{
            color: white;
            padding: 10px 25px;
            border-radius: 5px;
            &-success{
                background-color: green;
            }
            &-error{
                background-color: red;
            }
        }
    }
}


@media (max-width: 850px){
    .pankaw{
        &-archive{
            grid-template-columns: 1fr;
            &-item{
                width: 100%;
            }
        }
        &-form{
            grid-template-columns: 1fr;

            .col2{
                grid-column: 1;
            }
        }
    }
}