@font-face {
  font-family: 'Aller';
  src: url(Aller-Regular.woff2);
  font-display: swap;
  font-weight: 400;
}

@font-face {
  font-family: 'Aller';
  src: url(Aller-Bold.woff2);
  font-display: swap;
  font-weight: 700;
}

html {
  font-family: 'Aller';
}

.wrapper {
  position: relative;
  padding: 24px 32px 32px;
  width: 80%;
  background: #fdf2f3;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 5px 7px 8px rgba(0,0,0 , .2);
}

@media screen and (min-width: 1024px) {
  .wrapper {
    width: 768px;
  }  
}

.inner-wrapper {
 position: relative;
}

.mail, .phone {
  font-size: 20px;
  line-height: 28px;
  word-break: break-word;
}

main {
 display: flex;
 flex-direction: column;
}

.mail {
 position: relative;
 padding-left: 40px;
}

.mail:before {
 position: absolute;
 content: "";
 width: 32px;
 height: 32px;
 left: 0;
 top: 50%;
 transform: translateY(-50%);
 background: url(mail.svg);
 background-repeat: no-repeat;
 background-size: contain;
}

.phone {
 position: relative;
 padding-left: 40px;
 margin-bottom: 8px;
}

.phone:before {
 position: absolute;
 content: "";
 width: 32px;
 height: 32px;
 left: 0;
 top: 50%;
 transform: translateY(-50%);
 background: url(phone.svg);
 background-repeat: no-repeat;
 background-size: contain;
}