.directions {
 display: grid;
 grid-template-columns: 1fr;
 justify-items: end;
}
.directions > p {
 text-align: end;
}
.directions__grid {
 display: grid;
 gap: var(--spacer-sm);
 grid-template-columns: 1.6fr 1fr 1.6fr;
 grid-template-areas:
  "tec tec art"
  "early dancing dancing"
  "sport sport language";
}
.direction__card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: 12rem 1fr;
 border-radius: 1rem;
 box-shadow: var(--panel-shadow-setup);
 overflow: clip;
 background-size: cover;
 background-position: left 100% top 60%;
}
.direction__card:nth-child(1) {
 grid-area: tec;
}
.direction__card:nth-child(2) {
 grid-area: art;
}
.direction__card:nth-child(3) {
 grid-area: early;
}
.direction__card:nth-child(4) {
 grid-area: dancing;
}
.direction__card:nth-child(5) {
 grid-area: sport;
}
.direction__card:nth-child(6) {
 grid-area: language;
}
.directions__grid > div:nth-child(1) {
 background-position: right 100% bottom 4rem;
}
.directions__grid > div:nth-child(2) {
 background-position: right 100% bottom 6rem;
}
.directions__grid > div:nth-child(3) {
 background-position: right 100% ;
}
.directions__grid > div:nth-child(4) {
 background-position: right 100% bottom 7rem;
}
.directions__grid > div:nth-child(5) {
 background-position: right 100% bottom 9rem;
}
.directions__grid > div:nth-child(6) {
 background-position: right 50% bottom 6rem;
}
.direction__content {
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: start;
 justify-content: space-between;
 gap: var(--spacer-xs);
 padding: var(--spacer-sm);
 border-radius: 0 0 1rem 1rem;
 background: var(--filling-space);
 box-shadow: var(--panel-shadow-setup);
}
.direction__content > * {
 text-align: start;
}
.direction__tags {
 margin-left: var(--spacer-sm);
}
@media (max-width: 39em) {
 .directions__grid {
  width: 100%;
  grid-template-columns: 1fr;
  grid-template-areas:
   "tec"
   "art"
   "early"
   "dancing"
   "sport"
   "language";
 }
 .direction__card {
  display: flex;
  flex-direction: column;
  overflow: clip;
  background-size: cover;
  background-position: left 100% top 60%;
 }
 .direction__card-bg-holder {
  min-height: 8rem;
 }
 .direction__content {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  gap: var(--spacer-sm);
  padding: var(--spacer-sm);
 }
}