section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  column-gap: var(--mainpad); }
  @media (max-width : 900px) {
    section {
      grid-template-columns: repeat(4, 1fr);
      row-gap: var(--mainpad); } }
  section .intro {
    grid-column: 1/5; }
    @media (min-width : 900px) {
      section .intro {
        grid-column: 5/12;
        font-size: var(--fontMedium);
        margin-bottom: 4rem; } }
  section .card-holder {
    grid-column: 1/13;
    position: relative;
    display: grid;
    column-gap: var(--mainpad);
    row-gap: var(--mainpad);
    grid-template-columns: repeat(2, 1fr); }
    @media (max-width : 900px) {
      section .card-holder {
        grid-column: 1/5;
        grid-template-columns: repeat(1, 1fr); } }
  section .aspectholder {
    height: 33vw;
    position: relative;
    margin-bottom: 1em; }
    @media (max-width : 900px) {
      section .aspectholder {
        height: 60vw; } }
  section a .aspectholder {
    background-color: var(--black); }
  section a img {
    will-change: opacity;
    transition: opacity 0.4s; }
  section a:hover img {
    opacity: 0.8; }