header{position:relative;isolation:isolate;padding-bottom:0}header:before{content:"";position:absolute;width:100vw;height:min(60vh,500px);background-color:rgb(var(--clr-blue-light));z-index:-1}#contact-page .container{display:flex;flex-flow:column wrap;align-items:flex;gap:2rem}#contact-page .container .col{form{width: 100%;} a{color: rgb(var(--clr-white)); &:hover,&:focus{color: rgb(var(--clr-secondary));} &:focus-visible{outline: 2px solid rgb(var(--clr-primary-dark)); outline-offset: 4px;}}}#contact-page .container .col:first-child{order:2;padding:2rem;background-color:rgb(var(--clr-primary));color:rgb(var(--clr-white));border-radius:var(--border-radius);h4{font-weight: var(--fw-bold); font-size: 1.5rem; color: rgb(var(--clr-white)); margin-block-end: 1rem;} .subtitle{line-height: calc(var(--lh-default) * 1.25);} & .contact-infos{margin-block-start: 1.5rem; & div + div{margin-block-start: 1rem;} & div{display: flex; flex-flow: row nowrap; align-items: center; gap: 1rem; &:last-child{padding-inline-start: .5rem;}}} .icon{color: rgb(var(--clr-secondary)); font-size: 3rem;}}#contact-page .container .col:last-child{order:1}#contact-page .container .btn{max-width:340px;width:calc(100% - var(--body-padding));margin-block:2rem 4rem}@media screen and (min-width: 900px){#contact-page .container .btn{margin-block:2rem 6rem}}@media screen and (min-width: 900px){#contact-page .container{flex-flow:row nowrap;gap:2rem}#contact-page .container .col:first-child{order:1;flex:1 1 calc(30% - 2rem)}#contact-page .container .col:last-child{flex:1 1 calc(70% - 2rem);order:2}}#contact-page .form-group:has(input[required]) label:after,#contact-page .form-group:has(textarea[required]) label:after{content:"*";color:red;margin-inline-start:.25rem}