.team{.page-heading h1 { @media (min-width: 56.25em) { grid-column: 1 / 8; } } .page-content { @media (min-width: 56.25em) { display: grid; gap: 0 var(--gg); grid-template-columns: repeat(12,1fr); } }}.team-container{display:flex;flex-wrap:wrap;justify-content:center;margin:var(--hspace-s-l)calc(var(--gg)*2);@media(min-width:56.25em){grid-column: 2 / 12; margin-left: 0; margin-right: 0;}}.team-blurb{margin-bottom:var(--hspace-xs);p { font-size: var(--font-size-3); font-weight: 600; line-height: 1.2; } @media (min-width: 56.25em) { grid-column: 3 / 11; margin-bottom: var(--hspace-s-l); }}.team-card{display:block;flex:0 0 75%;img { height: auto; max-width: 100%; width: 100%; } &:nth-child(odd) { transform: rotate(-15deg); } &:nth-child(even) { transform: rotate(15deg); } @media (min-width: 37.5em) { flex-basis: 50%; } @media (min-width: 56.25em) { flex-basis: 33%; } @media (min-width: 75em) { flex-basis: 25%; }}.team-overlay{background:var(--black);flex-direction:column;overflow-y:hidden;position:fixed;top:0;left:0;bottom:0;right:0;z-index:4;&:not([hidden]){ display:flex; } .max-container { overflow-y:auto; }}.team-member-container{align-items:center;display:grid;@media(min-width:56.25em){grid-template-columns: repeat(12,1fr);}}.team-member{display:grid;gap:var(--gg)var(--gg);grid-column:2/12;grid-template-rows:auto;@media(min-width:56.25em){grid-template-columns: .5fr repeat(10,1fr) .5fr;}img { justify-self: center; height: auto; max-width: 28.44rem; width: 100%; grid-column: 2 / 11; @media (min-width: 56.25em) { grid-column: 8 / 13; } @media (min-width: 75em) { grid-column: 8 / 12; } }}.team-member-text{h2 { margin-bottom: 0; } small { color: var(--colour-2); display: block; margin-bottom: 2rem; } p { font-size: var(--font-size-4); font-weight: 600; line-height: 1.2; } grid-column: 2 / 11;@media(min-width:56.25em){grid-column: 1 / 8;}@media(min-width:75em){grid-column: 2 / 7;}}.team-overlay-button{appearance:none;background:var(--black);border:0;color:var(--colour-1);cursor:pointer;font-family:dm mono;font-size:var(--font-size-5);font-weight:400;grid-column:span 11;justify-self:end;margin:3rem 0 0;padding:0;&:focus,&:hover { color:var(--colour-3); outline:none; transition:all .2s ease; }}