@media screen and (min-width: 0em) { body { background: linear-gradient(to bottom,var(--color-main) 26rem,var(--bg-main) 0%); }} #contact { grid-area: contact; gap: 3rem;} #profile { grid-area: profile;} #projects { grid-area: projects;} #workers { grid-area: workers;} @media screen and (min-width: 36em) and (max-width: 61.99em) { main { display: grid; gap: 3rem; margin-top: 5rem; margin-bottom: 5rem; grid-template-areas: "contact profile" "contact workers" "contact projects"; } #contact { width: min-content; }} @media screen and (min-width: 62em) { main { display: grid; grid-template-columns: 35rem auto; gap: 3rem; margin-top: 5rem; margin-bottom: 5rem; grid-template-areas: "contact profile" "contact workers" "contact projects"; }} main h1,main h2 { color: var(--text-light); font-weight: 400; padding-bottom: 1.5rem; border-bottom: .1rem solid var(--border-profile);} #profile,#projects,#workers { background-color: var(--white); padding: 2rem 2rem;} @media screen and (max-width: 35.99em) { #profile,#projects,#workers { margin-top: 2rem; margin-bottom: 2rem; }} #contact { display: flex; align-items: stretch; flex-wrap: wrap; justify-content: space-evenly; padding: 0; height: max-content; align-self: start;}@media screen and (max-width: 35.99em) { #contact { padding-top: 2rem; }} #contact .slide-wrap { background-color: var(--white); width: 100%; height: 100%; padding: 2rem 2rem; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;} #contact .info { align-self: start;} #contact .info .categories { display: flex; flex-wrap: wrap; margin-top: 4rem; gap: 1rem;} .categories .badge.primary { background-color: var(--color-secondary);} @media screen and (min-width: 36em) { #contact { height: 100%; } #contact .slide-wrap { top: 10rem; height: max-content; }} @media screen and (min-width: 62em) { #contact,#profile,#projects { margin-top: 0; margin-bottom: 0; } #contact { background: none; padding: 0; display: flex; align-items: start; height: 100%; } #contact .slide-wrap { top: 12rem; height: auto; }}   #contact .avatar { margin-bottom: 3rem; min-width: 20rem;} #contact figure #imgAvatar { max-width: 15rem; margin: 0 auto;} #contact h1 { text-align: center; border-bottom: none; margin-top: 2rem;} #contact .contact { margin: 0;} #contact .socials { display: flex; flex-wrap: wrap; margin-top: 2rem;} #contact .socials li { display: flex; align-items: center; margin: .25rem .5rem;} #contact .socials li img { filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(0%); max-width: 1.8rem;} #contact .icon { position: relative; height: 100%; padding-left: 3rem; margin-bottom: 1rem;} #contact .icon::before { position: absolute; left: 0; width: 2.5rem; display: block; text-align: center;} #contact .icon.mail::before { content: url('/grafics/socials/email.svg');} #contact .icon.tel::before { content: url('/grafics/socials/tel.svg');} #contact .icon.locality::before { content: url('/grafics/socials/locality.svg');} #contact address ul { margin: 0;}  #profile h2 { margin-bottom: 2rem;} #profile .get-society { text-align: right; font-size: 1.3rem;} #profile p.label { margin-bottom: 1.6rem;} #profile .description p:not(.label) { margin: 1rem 0;} #profile .description ul,#profile .description ol { padding-left: 1rem;} #profile .description li { list-style: inside;} #profile .description div { margin: 1rem 0;} #profile > div:not(:last-child) { padding-bottom: 2rem;} #profile .label {  color: var(--text-light);} #profile .badge { margin: .5rem .25rem;}  #projects h2 { margin-bottom: 2rem;} #projects ul { display: grid; grid-template-columns: 1fr; justify-content: center; gap: 2rem;}@media screen and (min-width: 48em) { #projects ul { grid-template-columns: repeat(auto-fill,45%); }}#projects ul li a { display: flex;} #projects .zoombox { background: var(--bg-dark);} #projects .details { padding: 1rem 2rem;} #projects a .title { font-size: 1.6rem;} #projects a .categ { font-size: 1.3rem;}  #workers ul { display: grid; grid-template-columns: repeat(auto-fill,8rem); gap: 2rem; margin-bottom: 0;} #workers ul li { aspect-ratio: 1; width: 8rem;} #workers .avatar { width: 100%;} #workers ul li a { text-decoration: none;} #workers ul li span:hover,#workers ul li span:focus{ text-decoration: underline;} #workers ul li span { position: relative; display: inline-block; text-align: center; margin-top: 1rem; font-size: 1.4rem; font-weight: 600; color: var(--text-light);} .card-offer { display: flex; grid-template-columns: 10rem 1fr; border: .1rem solid var(--border-secondary); transition: .3s ease-in-out; background-color: white; padding: 1rem 1.25rem 1rem; margin : 1rem; width: 90%; gap: 1rem; } .card-offer:hover { transform: scale(1.05);} .card-offer a { height: 100%;} .card-offer .link-logo{ display: flex; align-items: center;} .card-offer .details { display: flex; flex-direction: column; justify-content: center;} .card-offer .details .title { font-size: 1.8rem; color: var(--text-dark);} .card-offer .details .infos { font-size: 1.2rem; font-weight: bold;} .card-offer .details .text { display: flex; flex-direction: column; justify-content: space-between; margin-right: 1rem;} .card-offer .details .description{ text-overflow:ellipsis; overflow:hidden; display: -moz-box !important; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal;} .card-offer .details .text .company { color: var(--color-main) !important; font-weight: bold; font-size: 1.4rem;} .wrap-offer{ gap: 1.5rem;} .society-offer{ width: 100%; overflow-y: auto; gap: 1.5rem; max-height: 40rem;} .link-card-offer{ text-decoration: none; color: var(--text-lighter);}