.contact { position: relative; display: flex; justify-content: space-between; @media (max-width: 50em) { flex-direction: column; } } .contact__main { flex: 1; } .contact__form { position: relative; } .contact__stamp { position: absolute; bottom: -1.5rem; right: 1rem; width: 6rem; visibility: hidden; opacity: 0; filter: blur(2px); transform: scale(1.3); transition: visibility 0s linear 0.3s, opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease; .form--sent & { visibility: visible; opacity: 1; filter: none; transform: none; transition-delay: 0s; } } .contact__thank-you { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; } .contact__sidebar { max-width: 16rem; margin-left: 2rem; @media (max-width: 50em) { max-width: 100%; margin: 0; margin-top: 2rem; display: flex; flex-wrap: wrap; } } .contact__detail { @media (min-width: 50em), (max-width: 42em) { &:not(:last-child) { margin-bottom: 1.8rem; } } @media (max-width: 50em) { width: 50%; } @media (max-width: 42em) { width: 100%; } } .contact__heading { font-size: -cdd-rem(20); margin-bottom: 0.3em; } .contact__email { display: flex; margin-bottom: 0.3rem; > :nth-child(1) { margin-right: 0.5rem; padding-right: 0.5rem; border-right: 1px solid $color--passive; } > :nth-child(2) { align-self: center; font-size: -cdd-rem(22); } }