:root {
  --padding: 2rem;
  --small-padding: 1rem;
  --button-border: solid 1px;
}

section.plugin-collections_banner {
  margin-top: var(--padding);
  margin-bottom: var(--padding);
  padding-top:1rem;
  padding-bottom:2rem;
  background: rgb(37, 37, 37);
}
section.plugin-collections_banner .max-width {
 /* border-left: 0;
  border-right: 0;*/
}

section.plugin-collections_banner a {
  text-decoration: none;
}

section.plugin-collections_banner article {
  display: flex;
  flex-direction: column-reverse;
  padding-top: var(--padding);
  padding-bottom: var(--padding);
}

section.plugin-collections_banner header {
  padding-top: var(--small-padding);
  margin:var(--small-padding) 0;
}

section.plugin-collections_banner h3 {
  font-size:1.1rem;
  text-decoration: none;
}

section.plugin-collections_banner .box-container {
  margin-left:0;
  margin-right:0;
  align-items: baseline;
  padding-top: var(--padding);
  /*padding-left: var(--small-padding);
  padding-right: var(--small-padding);*/
  display: flex;
  justify-content: space-between;
}

section.plugin-collections_banner .box-container h2 {
  font-size:1.1rem;
  font-weight: 700;
  text-decoration: underline solid var(--underlineColor) 2px;
}

section.plugin-collections_banner .collection-text {
  color: rgba(255, 255, 255, 0.7);
  /*padding-bottom: var(--small-padding);*/
}

section.plugin-collections_banner .see-all {
  /*font-size: small;
  color: rgba(255, 255, 255, 0.5);*/
  display: flex;
  align-items: center;
}

section.plugin-collections_banner .see-all a {
  /*display: inline-block;
  padding: 0.3rem 3rem 0.3rem 1rem;
  background: url(gfx/arrow.png) right no-repeat;
  background-size: auto 1.5em;
  text-decoration: none;*/
}

section.plugin-collections_banner .arrow {
  padding-left: 10px;
  display: inline-block;
}

section.plugin-collections_banner .collection-button {
  max-width: 300px;
  display: inline-block;
  padding:0.9rem 1.7rem;
  font-size:0.9rem;
  border: var(--button-border);
  border-color: var(--underlineColor);
  color: rgba(255, 255, 255, 0.7);
}

section.plugin-collections_banner .image-container {
	margin-left:calc(var(--siteMaxWidthOuter) * -1);
	margin-right:calc(var(--siteMaxWidthOuter) * -1);
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:0.5rem;
	}
	section.plugin-collections_banner .image-container img {
		width:100%;
		aspect-ratio:1/1;
		object-fit:cover;
		}

@media all and (min-width:45em) { /* 45*12px=720px */
  /* section.plugin-collections_banner .max-width {
    padding-bottom: var(--padding);
  } */
	section.plugin-collections_banner .box-container {
		padding-left: var(--small-padding);
		padding-right: var(--small-padding);
		}
  section.plugin-collections_banner .box-container h2 {
	font-size:1.8rem;
	}
  section.plugin-collections_banner > div {
    /*border-left: var(--siteMaxWidthOuter) solid transparent;
    border-right: 22px solid transparent;*/
  }

  section.plugin-collections_banner article {
    display: flex;
    flex-direction: row;
    padding-top: var(--padding);
    padding-bottom: 0;
    align-items: center;
  }
  
  section.plugin-collections_banner h3 {	 font-size:1.5rem;	}

  section.plugin-collections_banner header {
    margin:var(--small-padding);
	width:60rem;
	padding-right: var(--padding);
  }

	section.plugin-collections_banner .image-container {
		margin-left:0;
		margin-right:0;
		gap:1rem;
		}

  section.plugin-collections_banner .box-container {
    padding-left: 0;
    padding-right: 0;
    margin-left: var(--small-padding);
    margin-right: var(--small-padding);
  }

  section.plugin-collections_banner .collection-text {}
}