.form {
    margin-bottom: var(--spacing-40);   
    
}

.form__container {    
    margin-block-end: 80px;    

}

.form-content {
    border: 1px solid rgba(255,255,255,0.2);
    padding-inline-start: var(--spacing-8);
    padding-inline-end: var(--spacing-8);
    padding-block-start: var(--spacing-8);
    padding-block-end: var(--spacing-8);
    border-radius:10px;
}
.form__container .form-content {  
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  max-inline-size: 540px;
  margin: auto;
  font: clamp(16px, 5vw, 18px) var(--primary-font);
}
.form__container p {
  color: white;
  text-align: center;
 
}
.form__container label {
  font: bold clamp(16px, 5vw, 18px) var(--primary-font);
}
.form__container input, .form__container textarea {
    background-color: rgba(255, 255, 255, 0.1);
    border: .5px solid var(--primary-white);
    border-radius: 8px;   
    padding-inline-end: var(--spacing-16);   
    padding-inline-start: var(--spacing-16);
    padding-block-start: var(--spacing-12);
    padding-block-end: var(--spacing-12);
    margin-block-start: var(--spacing-8);
    color: var(--primary-white);
}

.form button {
    margin-block-start: var(--spacing-8);
    position: relative;    
}
.form button:hover {
    top: 2px;
}

@media(min-width: 768px) {
    .form {
        /* background-color: #0A0F24;
        background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
        background-size: 20px 20px; */
        background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
        border-radius: 20px;
    }
    .form-content{
        padding-block-start: var(--spacing-16);
        padding-block-end: var(--spacing-16);
        border: none;
    }
}