:root {
  --gap: 1rem;
  --padding: 1rem;
  --text-size: 24px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-size);
  font-weight: normal;
  padding: var(--padding);
  background-color: #a3e637;
  color: #fff;
}

a {
  text-decoration: underline;
  color: inherit;
}

.main{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--gap);
    height: 95vh;
}

.description{
    grid-column: span 4;
    max-height: 100px;  
}

.contact{
    grid-column: 4 / span 2;
    align-self: end;
}

@media (max-width: 768px) {

    :root {
        --gap: 16px;
    }
    .description{
        grid-column: span 4;
        max-width: 300px;
    }
    .contact{
        grid-column: 2 / span 3;
    }
}