:root {
  --fullwidth-padding-x: min(1.5rem, 5vw);
  --fullwidth-padding-y: min(2.5rem, 5vw);

  --fullwidth-background-green-500: var(--color-green-500);
  --fullwidth-background-green-400: var(--color-green-400);
  --fullwidth-background: var(--color-transparent);

  --fullwidth-color-light: var(--color-white);
  --fullwidth-color-medium: var(--color-turqoise-500);
  --fullwidth-color-dark: var(--color-black);
  --fullwidth-color: var(--color-black);

  --fullwidth-content-maxwidth: 50rem;

  --fullwidth-box-background: var(--color-red-500);
  --fullwidth-box-padding: 2rem;
  --fullwidth-box-maxwidth: 15rem;

  --fullwidth-border-radius: clamp(2rem, 5vw, 3rem);
}

/**
 * Main fullwidth element
 */

.fullwidth {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  z-index: 5;
  transform: translateX(0);
}

/**
 * Wrapper
 */

.fullwidth-wrapper {
  display: grid;
  grid-template-areas: "stack";
  grid-gap: 2rem;
  gap: 2rem;
}

/**
 * Content
 */

.fullwidth-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: var(--fullwidth-alignment, center);
  flex: 1 1 0;
  grid-area: stack;
  padding-top: calc(var(--padding-y)*3);
  padding-bottom: calc(var(--padding-y)*2);
}

@media (min-width: 640px) {

.fullwidth-content {
    padding-top: calc(var(--padding-y)*1.5);
    padding-bottom: var(--padding-y)
}
  }

.fullwidth-flex-start .fullwidth-content {
    --fullwidth-alignment: flex-start;
    text-align: left;
  }

.fullwidth-center .fullwidth-content {
    --fullwidth-alignment: center;
    text-align: center;
  }

.fullwidth-flex-end .fullwidth-content {
    --fullwidth-alignment: flex-end;
    text-align: left;
  }

.fullwidth-content-items {
  justify-content: center;
  align-self: flex-end;
}

@media (min-width: 768px) {

.fullwidth-content-items {
    align-self: flex-start
}
  }

/**
 * Media
 */

.fullwidth-media {
  display: flex;
  flex-direction: column;
  position: relative;
  grid-area: stack;
  overflow: hidden;
}

.fullwidth-media::after {
    content: '';
    background: var(--section-color-background);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.75;
  }

.fullwidth-ingress {
  max-width: 50rem;
  max-width: var(--fullwidth-content-maxwidth);
}

.fullwidth-image {
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}