:root{--color1:#009fe3;--color2:#e4f5fc;--color3:#33b2e9;--color4:#021520;--color5:#00a3e8;--color6:#005d84;--active-links-color:var(--color3);--container-max-width:1300px;--container-padding-inline:1.5rem;--container-padding-block:4rem;--header-height:360px}.header-title-container{top:60%}@media screen and (width <= 428px){.header-title-container .title{font-size:1.8em}}section#trainings{padding-block-end:3rem}section#trainings .title-shadow-section{font-size:7rem;transform:translate(-50%,-40%)}.training-container{display:flex;flex-flow:column;justify-content:center;margin:0 auto;max-width:1300px;padding-block:2rem;padding-inline:var(--container-padding-inline)}.training-container li+li{border-top:1px solid rgba(99,99,99,.3)}.training-container li{display:grid;gap:1rem;grid-template-areas:"title title title" "picture main-informations main-informations" "picture details details";grid-template-columns:1fr 5fr 1fr;padding-block:2rem}.training-container li .picture-area{grid-area:picture}.training-container li .picture-area .picture-container{position:relative;width:fit-content}.training-container li .picture-area .picture-container .picture img{--size:8rem;border-radius:50%;height:var(--size);object-fit:cover;width:var(--size)}.training-container li .picture-area .picture-container .picture-icon{bottom:.2rem;position:absolute;right:.2rem;width:2.5rem}.training-container li .title{font-family:GothamBoldItalic,sans-serif;font-size:1.7rem;font-weight:700}.training-container li .main-informations{display:flex;flex-direction:column;gap:.4rem;grid-area:main-informations}.training-container li .main-informations .date,.training-container li .main-informations .trainers{align-items:center;display:flex;gap:.3rem}.training-container li .main-informations .date{font-family:GothamBold,sans-serif;text-transform:capitalize}.training-container li .title{grid-area:title}.training-container li .details{display:flex;flex-wrap:wrap;grid-area:details}.training-container li .details .icon-container{padding-inline:.5rem}.training-container li .details .icon-container-category+.icon-container-level{border-left:1px solid rgba(99,99,99,.3);height:fit-content}.training-container li .icon{width:1.5rem}.training-container li .icon-smoked{opacity:.5}@media screen and (min-width:1024px){.training-container{grid-template-areas:"picture title details" "picture main-informations main-informations";grid-template-columns:1fr 5fr 1fr}.training-container .details{justify-self:end}}