.digital-section {
  width: 100%;
  height: 49vw;
  padding: 4vw 3vw;
  padding-top: 9vw;
  box-sizing: border-box;
  transition: background-color 0.2s ease-in-out;
}

.digital-section hr{
  border-width: 0.175vw;
}

[data-theme="dark"] .digital-wrapper{
  background: linear-gradient(rgba(var(--primaryColorRgbTheme), 0.75), rgba(var(--primaryColorRgbTheme), 0.75));
  background-size: cover;
  background-position: center;
}

[data-theme="light"] .digital-wrapper{
  background: linear-gradient(rgba(var(--primaryColorRgbTheme), 0.75), rgba(var(--primaryColorRgbTheme), 0.75));
  background-size: cover;
  background-position: center;
}

.digital-wrapper{
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: center;
  border-radius: 0.2vw;
}

.digital-info-container {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.digital-section-title {
  color: var(--secondaryHeadingColorTheme);
  font-family: var(--headingFont);
  font-size: var(--superheadingFontSize);
  margin: 0;
  margin-bottom: 2vw;
  font-weight: 900;
  text-shadow: 0 0 0.5vw rgba(var(--primaryColorRgbTheme), 0.5);
}

.digital-section-paragraph {
  color: var(--secondaryHeadingColorTheme);
  font-family: var(--headingFont);
  font-weight: 400;
  font-size: var(--subheadingFontSize);
  line-height: var(--headingFontSize);
  margin: 0 auto;
  margin-top: 1vw;
  text-align: justify;
  margin-top: 3vw;
  text-shadow: 0 0 0.5vw rgba(var(--primaryColorRgbTheme), 0.5);
}

.digital-section-subtitle {
  color: rgba(var(--secondaryColorRgbTheme), 0.8);
  font-family: var(--headingFont);
  font-weight: 600;
  font-size: var(--paragraphFontSize);
  text-shadow: 0 0 1vw 0 #00000080;
  margin: 0;
  margin-bottom: 2vw;
  text-shadow: 0 0 0.5vw rgba(var(--primaryColorRgbTheme), 0.5);
}

.digital-graphic-container {
  padding-right: 8vw;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.digital-action-container{
  width: 100%;
  height: max-content;
  margin-top: 2vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.digital-action-button-primary{
  border: 0;
  width: max-content;
  height: max-content;
  background-color: var(--tertiaryColor);
  color: var(--tertiaryHeadingColor);
  font-family: var(--headingFont);
  font-size: var(--paragraphFontSize);
  font-weight: 900;
  border-radius: 0.2vw;
  padding: 1vw 1.4vw;
  outline: none;
  margin-right: 2vw;
}

.digital-action-button-secondary{
  border: 0;
  width: max-content;
  height: max-content;
  background-color: transparent;
  color: var(--secondaryHeadingColorTheme);
  font-family: var(--headingFont);
  font-size: var(--paragraphFontSize);
  font-weight: 900;
  border-radius: 0.2vw;
  padding: 0.7vw 1.1vw;
  border: 0.25vw solid var(--secondaryHeadingColorTheme);
  outline: none;
  margin-right: 2vw;
}

.digital-collage-image-container{
  position: absolute;
  border-radius: 0.2vw;
  box-shadow: 0 0 4vw 0 rgba(var(--secondaryColorRgbTheme), 0.25),
            0 0 0.5vw 0 rgba(var(--secondaryColorRgbTheme), 0.5);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 0.5vw solid rgba(var(--secondaryColorRgbTheme), 0.9);
}

.digital-collage-image-container.collage-image-1{
  width: 37vw;
  height: 10.7vw;
  top: -5vw;
  left: 2vw;
  transform: perspective(68vw) rotateX(340deg) rotateY(0deg) rotateZ(0deg);
  background-image: url("/images/digitalSection/digital-collage-3.webp");
  background-size: 110%;
  background-position: 50% 35%;
  z-index: 2;
  box-shadow: none;
}

.digital-collage-image-container.collage-image-2{
  width: 10vw;
  height: 13.7vw;
  top: 6.4vw;
  left: 31.7vw;
  transform: perspective(68vw) rotateX(0deg) rotateY(340deg) rotateZ(0deg) scaleX(-1);
  background-image: url("/images/digitalSection/digital-collage-2.webp");
  z-index: 4;
  background-position: 0% 100%;
  background-size: 100%;
}

.digital-collage-image-container.collage-image-3{
  width: 20.9vw;
  height: 13vw;
  top: 6.6vw;
  left: 9.85vw;
  transform: perspective(68vw) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  background-image: url("/images/digitalSection/digital-collage-3.webp");
  background-size: 130%;
  background-position: 30% 55%;
}

.digital-collage-image-container.collage-image-4{
  width: 10vw;
  height: 13.7vw;
  top: 6.4vw;
  left: -1.2vw;
  transform: perspective(68vw) rotateX(0deg) rotateY(20deg) rotateZ(0deg) scaleX(-1);
  background-image: url("/images/digitalSection/digital-collage-4.webp");
  z-index: 4;
  background-position: 100% 100%;
  background-size: 100%;
}

.digital-collage-image-container.collage-image-5{
  width: 17vw;
  height: 14vw;
  top: 20.4vw;
  left: 2.6vw;
  transform: perspective(68vw) rotateX(20deg) rotateY(0deg) rotateZ(3deg);
  background-image: url("/images/digitalSection/digital-collage-5.webp");
  background-position: 50% 54%;
  background-size: 130%;

}

.digital-collage-image-container.collage-image-6{
  width: 17vw;
  height: 14vw;
  top: 20.4vw;
  left: 21.4vw;
  transform: perspective(68vw) rotateX(20deg) rotateY(0deg) rotateZ(-3deg);
  background-image: url("/images/digitalSection/digital-collage-6.webp");
  background-position: 0% 80%;
  background-size: 100%;
}

@media(max-width: 672px){
  .digital-section {
    height: 222vw;
    padding: 8vw 6vw;
    padding-top: 18vw;
    flex-direction: column;
  }
  
  .digital-section hr{
    border-width: 0.35vw;
  }
  
  .digital-wrapper{
    width: 100%;
    height: 100%;
    border-radius: 0.4vw;
    flex-direction: column;
  }
  
  .digital-info-container {
    width: 100%;
    height: 60%;
  }
  
  .digital-section-title {
    font-size: var(--superheadingFontSize);
    margin-bottom: 4vw;
    text-shadow: 0 0 1vw rgba(var(--primaryColorRgbTheme), 0.5);
  }
  
  .digital-section-paragraph {
    font-size: var(--subheadingFontSize);
    line-height: var(--headingFontSize);
    margin-top: 6vw;
    text-shadow: 0 0 1vw rgba(var(--primaryColorRgbTheme), 0.5);
  }
  
  .digital-section-subtitle {
    font-size: var(--paragraphFontSize);
    text-shadow: 0 0 2vw 0 #00000080;
    margin-bottom: 4vw;
    text-shadow: 0 0 1vw rgba(var(--primaryColorRgbTheme), 0.5);
  }
  
  .digital-graphic-container {
    padding-right: 0;
    margin-top: 8vw;
    width: 100%;
    height: 40%;
  }
  
  .digital-action-container{
    margin-top: 4vw;
  }
  
  .digital-action-button-primary{
    font-size: var(--paragraphFontSize);
    border-radius: 0.4vw;
    padding: 2vw 2.8vw;
    margin-right: 4vw;
  }
  
  .digital-action-button-secondary{
    font-size: var(--paragraphFontSize);
    border-radius: 0.4vw;
    padding: 1.4vw 2.2vw;
    border: 0.5vw solid var(--secondaryHeadingColorTheme);
    margin-right: 4vw;
  }
  
  .digital-collage-image-container{
    border-radius: 0.4vw;
    box-shadow: 0 0 8vw 0 rgba(var(--secondaryColorRgbTheme), 0.25),
              0 0 1vw 0 rgba(var(--secondaryColorRgbTheme), 0.5);
    border: 1vw solid rgba(var(--secondaryColorRgbTheme), 0.9);
  }
  
  .digital-collage-image-container.collage-image-1{
    width: 74vw;
    height: 21.4vw;
    top: 3vw;
    left: -1vw;
    transform: perspective(68vw) rotateX(340deg) rotateY(0deg) rotateZ(0deg);
    background-image: url("/images/digitalSection/digital-collage-3.webp");
    background-size: 140%;
    background-position: 50% 40%;
    z-index: 2;
    box-shadow: none;
  }
  
  .digital-collage-image-container.collage-image-2{
    width: 20vw;
    height: 27.4vw;
    top: 26.4vw;
    left: 59vw;
    transform: perspective(68vw) rotateX(0deg) rotateY(340deg) rotateZ(0deg) scaleX(-1);
    background-image: url("/images/digitalSection/digital-collage-2.webp");
    z-index: 4;
    background-position: 0% 100%;
    background-size: 100%;
  }
  
  .digital-collage-image-container.collage-image-3{
    width: 41.8vw;
    height: 26vw;
    top: 26.6vw;
    left: 14.85vw;
    transform: perspective(68vw) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    background-image: url("/images/digitalSection/digital-collage-3.webp");
    background-size: 155%;
    background-position: 36% 59%;
  }
  
  .digital-collage-image-container.collage-image-4{
    width: 20vw;
    height: 27.4vw;
    top: 26.4vw;
    left: -7.2vw;
    transform: perspective(68vw) rotateX(0deg) rotateY(20deg) rotateZ(0deg) scaleX(-1);
    background-image: url("/images/digitalSection/digital-collage-4.webp");
    z-index: 4;
    background-position: 100% 100%;
    background-size: 100%;
  }
  
  .digital-collage-image-container.collage-image-5{
    width: 34vw;
    height: 28vw;
    top: 52.4vw;
    left: -1.6vw;
    transform: perspective(68vw) rotateX(20deg) rotateY(0deg) rotateZ(3deg);
    background-image: url("/images/digitalSection/digital-collage-5.webp");
    background-position: 50% 54%;
    background-size: 130%;
  }
  
  .digital-collage-image-container.collage-image-6{
    width: 34vw;
    height: 28vw;
    top: 52.4vw;
    left: 39.4vw;
    transform: perspective(68vw) rotateX(20deg) rotateY(0deg) rotateZ(-3deg);
    background-image: url("/images/digitalSection/digital-collage-6.webp");
    background-position: 0% 80%;
    background-size: 100%;
  }
}