.savsjo-puffar {
   margin-top: 5em;
}

.savsjo-puffar__header {
   display: inline-block;
	color: var( --env-element-primary-font-color );
   background-color: var( --env-element-primary-background-color );
   padding: .25em 1em;
   position: relative;
   top: -2em;
}

.savsjo-puffar > ul {
   list-style: none;
   display: flex;
   padding: .5rem;
   align-items: center;
   justify-content: center;
   flex-flow: wrap;
   margin-top: -4em;
}

.savsjo-puff {
   display: flex;
   flex-direction: column;
   position: relative;
   max-width: 20em;
   margin: 1rem;
   background-color: var( --env-section-background-color );
}

.savsjo-puff__text {
   padding: 1rem;
   flex: 1 0 auto;
   display: flex;
   flex-direction: column;
}

.savsjo-puff__text h3 {
   margin: 0;
   font-size: 120%;
   font-weight: bold;
}

.savsjo-puff__text a {
   text-decoration: none;
	color: var( --env-link-secondary-font-color ) !important;
}

.savsjo-puff p {
   max-width: 60ch;
}

.savsjo-puff__img img {
   width: 320px;
   height: 240px;
   object-fit: cover;
}

.savsjo-puff a::after {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
}

.savsjo-puff:hover a {
   text-decoration: underline;
}

.savsjo-puff a:focus {
   outline: none !important;
   text-decoration: underline;
}

.savsjo-puff:focus-within {
   box-shadow: 0 0 0 3px #000;
}

.savsjo-puff:focus-within a:focus {
   text-decoration: none;
}

.savsjo-puff__text > * + * {
   margin-top: 0.75rem;
}

.savsjo-puff__text > :last-child {
   margin-top: auto;
}