.grid__element {
  height: 200px;
}

.grid__link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #3f4444;
  background-repeat: no-repeat;
}

.grid__link:hover {
  color: black;
}

.grid__link:focus {
  outline: 1px solid #3f4444;
}

.grid__link:hover .grid__title,
.grid__link:focus .grid__title {
  font-weight: 700;
}

.compo__boxgroups {
  padding: 20px 0;
}

.compo__boxgroups--bg {
  padding: 80px 0 55px 0;
}

.compo__boxgroups--feat .grid__element {
  height: 222px;
}

.compo__boxgroups--feat .grid__element--wide {
  grid-column-start: a;
  grid-column-end: b;
}

.compo__boxgroups .d-grid {
  display: grid;
  gap: 12px;

}

.compo__boxgroups .d-grid.grid-layout--feat {
  grid-template-areas:
  "a b"
  ". .";
}

@media (min-width: 768px) {
  .grid__element {
    height: 320px;
  }
}

@media (min-width: 1220px) {

  .compo__boxgroups .d-grid {
    grid-template-areas:
    "a b"
    ". .";
  }

  .compo__boxgroups .d-grid.grid-layout--alt {
    grid-template-areas:
      "a a col-end"
      "col-start b b"
      ". . .";
  }

  .compo__boxgroups .grid__element--wide {
    grid-column: span 2;
  }

  .compo__boxgroups .d-grid.grid-layout--feat {
    grid-template-areas:
      "col-wide-a col-wide-b a b"
      "col-wide-c col-wide-d a b"
      ". . . .";
  }

  .compo__boxgroups--feat .grid__element--wide {
    height: 455px;
    grid-row-start: col-wide-a;
    grid-row-end: col-wide-d;
    grid-column-start: col-wide-a;
    grid-column-end: col-wide-d;
  }
}

.grid__title:after {
  display: block;
  content: attr(data-title);
  font-weight: 600;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.grid__title--dark {
  background-color: #070606;
  color: white;
}