src/components/info.css - master - Ilya_Betyaev/hackvlg

src/components/info.css
160 строк3 KB
Ilya_Betyaev
24 июн 2024, 11:54
24 июн 2024, 11:54eab064a
.info-contact1 {
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: column;
}
.info-form {
  gap: var(--dl-space-space-oneandhalfunits);
  width: 60%;
}
.info-container {
  gap: var(--dl-space-space-unit);
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: row;
}
.info-input {
  gap: var(--dl-space-space-halfunit);
  width: 50%;
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  flex-direction: column;
}
.info-input1 {
  gap: var(--dl-space-space-halfunit);
  width: 50%;
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  flex-direction: column;
}
.info-container1 {
  gap: var(--dl-space-space-unit);
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: row;
}
.info-input2 {
  gap: var(--dl-space-space-halfunit);
  width: 50%;
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  flex-direction: column;
}
.info-container2 {
  flex: 0 0 auto;
  width: 50%;
  display: flex;
  align-self: flex-start;
  align-items: flex-start;
  flex-direction: column;
}
.info-input3 {
  gap: var(--dl-space-space-halfunit);
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  flex-direction: column;
}
.info-container3 {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-self: flex-start;
  align-items: flex-start;
  flex-direction: column;
}
.info-input4 {
  gap: var(--dl-space-space-halfunit);
  width: 100%;
  display: flex;
  align-self: flex-start;
  align-items: flex-start;
  flex-direction: column;
}
.info-button {
  align-self: flex-start;
}
@media(max-width: 991px) {
  .info-max-width {
    align-items: flex-start;
    flex-direction: column;
  }
  .info-form {
    width: 100%;
  }
  .info-container {
    gap: var(--dl-space-space-twounits);
    width: 100%;
    flex-direction: row;
  }
  .info-input {
    width: 50%;
  }
  .info-input1 {
    width: 50%;
    flex-direction: column;
  }
  .info-container1 {
    gap: var(--dl-space-space-twounits);
    width: 100%;
    flex-direction: row;
  }
  .info-input2 {
    width: 50%;
  }
  .info-container2 {
    gap: var(--dl-space-space-twounits);
    width: 100%;
    flex-direction: row;
  }
  .info-input3 {
    gap: var(--dl-space-space-halfunit);
    width: 50%;
    flex-direction: column;
  }
  .info-container3 {
    gap: var(--dl-space-space-twounits);
    width: 100%;
    flex-direction: row;
  }
}
@media(max-width: 479px) {
  .info-contact1 {
    width: 100%;
  }
  .info-max-width {
    position: relative;
  }
  .info-form {
    width: 433px;
    padding: var(--dl-space-space-unit);
    align-items: center;
    justify-content: flex-start;
  }
  .info-container {
    height: 100%;
    align-items: center;
    flex-direction: column;
  }
  .info-input {
    width: 100%;
  }
  .info-input1 {
    width: 100%;
  }
  .info-container1 {
    align-items: stretch;
    flex-direction: column;
  }
  .info-input2 {
    width: 100%;
  }
}