:root {
  --primary: #0288D1;
  --secondary: #CFDD2C;

  color-scheme: light;
}

h7, h8 {
  overflow-wrap: break-word;
}

h8 {
  font-size: var(--text-7);
  margin: var(--space-2) 0 var(--space-1);
}


.wide {
  padding-left: 2em;
  padding-right: 2em;
}

.pill-exp {
  position: relative;
	bottom: 1em;
	margin-left: -0.2em;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
	padding-left: 0.7em;
	padding-right: 0.7em;
}

.card {
  border-radius: 2px;
}

.unigrid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
  grid-auto-rows: minmax(400px, auto);
}

.fg {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.fh {
  height: 100%;
}

.pill {
  border-radius: 2em
}

.blog-icon {
  width: 6rem;
  height: 6rem;
}

.hover-link {
  &:hover {
    color: var(--primary);
    transform: scale(1.01);
  }

  color: initial;
  transition: all 0.6s ease 0s;
}

aside[data-sidebar] {
  nav {
    padding: 0;
    padding-top: var(--space-3);

    &.sep ul {
      border-block-end: 1px solid var(--border);
    }
  }
}

.image-splash {
  height: 30rem;
  width: 24rem;
  
  .top-text {
    position: absolute;
    padding: 1.7647058824rem;
    width: 20rem;
    color: #1d1d1f;
  }

  .bottom-text {
    position: absolute;
    padding: 1.7647058824rem;
    width: 20rem;
    color: #1d1d1f;
    margin-top: 17rem;
    height: 11rem;

    .actions {
      position: absolute;
      bottom: 1.5rem;
    }

    div {
      padding: 1rem;
    }
  }
}


img.thumb {
  /* Ensure minimal layout shift*/
  aspect-ratio: 0.888888;

}

.zoom
{
  &:hover {
    transform: scale(1.01);
  }
  transition: all 0.5s ease 0s;


}


a:has(article) {
  text-decoration: none;
}

article {
  position: relative;

  &.blog {
    max-width: 860px;
    margin-block-end: 3rem;
  }

  footer.actions {
    position: absolute;
    bottom: 1.2em;
  }
}