.overlay1::after {
/* Overlay using the SVG as background image */
content: "";
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat; /* Prevent tiling */
background-size: cover; /* Stretch image to fill container (adjusted below) */
position: absolute;
top: 100%; /* Position at bottom of the div */
left: 0; /* Align to left edge */
width: 13vw; /* Fill the entire width of the div */
height: 20vw; /* 100% height + 50% overflow */
transform: translateY(calc(-10vw - 100px)); /* Adjust positioning to account for overflow */
z-index: 100; /* Place the overlay behind the content */
}
@media screen and (max-width: 768px) {
.overlay1::after {
width: 20vw;
height: 31vw;
transform: translateY(calc(-50vw + 140px));
opacity: 0.5;
}
}
.overlay2::after {
/* Overlay using the SVG as background image */
content: "";
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat; /* Prevent tiling */
background-size: cover; /* Stretch image to fill container (adjusted below) */
position: absolute;
bottom: 0;
right: 0; /* Align to left edge */
width: 18vw; /* Fill the entire width of the div */
height: 10vw; /* 100% height + 50% overflow */
z-index: 100; /* Place the overlay behind the content */
}
@media screen and (max-width: 768px) {
.overlay2::after {
width: 20vw;
height: 31vw;
opacity: 0.5;
}
}
.underlay3::before {
/* Overlay using the SVG as background image */
content: "";
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat; /* Prevent tiling */
background-size: cover; /* Stretch image to fill container (adjusted below) */
position: absolute;
bottom: 0;
right: 20vw; /* Align to left edge */
width: 60vw; /* Fill the entire width of the div */
height: 60vw; /* 100% height + 50% overflow */
transform: translateY(calc(50vh - 100px)); /* Adjust positioning to account for overflow */
z-index: -1; /* Place the overlay behind the content */
}
@media screen and (max-width: 768px) {
.underlay3::before {
width: 130vw; /* Fill the entire width of the div */
height: 130vw; /* 100% height + 50% overflow */
right: -50vw; /* Align to left edge */
display: none;
opacity: 0.5;
}
}
.underlay4::before {
/* Overlay using the SVG as background image */
content: "";
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat; /* Prevent tiling */
background-size: cover; /* Stretch image to fill container (adjusted below) */
position: absolute;
bottom: 0;
right: -10vw; /* Align to left edge */
width: 50vw; /* Fill the entire width of the div */
height: 50vw; /* 100% height + 50% overflow */
transform: translateY(calc(50vh - 100px)); /* Adjust positioning to account for overflow */
z-index: -1; /* Place the overlay behind the content */
}
@media screen and (max-width: 768px) {
.underlay4::before {
width: 130vw; /* Fill the entire width of the div */
height: 130vw; /* 100% height + 50% overflow */
right: -50vw; /* Align to left edge */
display: none;
opacity: 0.5;
}
}
.underlay5::after {
/* Overlay using the SVG as background image */
content: "";
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat; /* Prevent tiling */
background-size: cover; /* Stretch image to fill container (adjusted below) */
position: absolute;
bottom: 0;
right: 0; /* Align to left edge */
width: 18vw; /* Fill the entire width of the div */
height: 10vw; /* 100% height + 50% overflow */
z-index: 100; /* Place the overlay behind the content */
}
@media screen and (max-width: 768px) {
.underlay5::after {
width: 20vw;
height: 31vw;
opacity: 0.5;
}
}
.underlay6::before, .underlay7::before {
/* Overlay using the SVG as background image */
content: "";
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat; /* Prevent tiling */
background-size: cover; /* Stretch image to fill container (adjusted below) */
position: absolute;
top: 0;
right: 0; /* Align to left edge */
width: 35vw; /* Fill the entire width of the div */
height: 56vw; /* 100% height + 50% overflow */
transform: translateX(10vh); /* Adjust positioning to account for overflow */
z-index: 1; /* Place the overlay behind the content */
}
@media screen and (max-width: 768px) {
.underlay6::before, .underlay7::before {
width: 48vw;
height: 92vw;
transform: translateX(0vh); /* Adjust positioning to account for overflow */
opacity: 0.5;
}
}
.underlay7::before {
top: 50vh;
right: 0; /* Align to left edge */
width: 35vw; /* Fill the entire width of the div */
height: 56vw; /* 100% height + 50% overflow */
transform: translateX(10vh); /* Adjust positioning to account for overflow */
}
@media screen and (max-width: 768px) {
.underlay7::before {
top: 0;
width: 48vw;
height: 92vw;
transform: translateX(0vh); /* Adjust positioning to account for overflow */
opacity: 0.5;
}
}
.underlay8::before {
/* Overlay using the SVG as background image */
content: "";
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat; /* Prevent tiling */
background-size: cover; /* Stretch image to fill container (adjusted below) */
position: absolute;
top: 0;
right: 50%; /* Align to left edge */
left: 50%;
width: 60vw; /* Fill the entire width of the div */
height: 60vw; /* 100% height + 50% overflow */
transform: translate(-50%, -10%); /* Adjust positioning to account for overflow */
z-index: 1; /* Place the overlay behind the content */
}
@media screen and (max-width: 768px) {
.underlay8::before {
width: 100vw;
height: 100vw;
transform: translateX(-20vh); /* Adjust positioning to account for overflow */
opacity: 0.5;
}
}
.underlay9::before {
/* Overlay using the SVG as background image */
content: "";
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat; /* Prevent tiling */
background-size: cover; /* Stretch image to fill container (adjusted below) */
position: absolute;
bottom: 0;
right: -10vw; /* Align to left edge */
width: 75vw; /* Fill the entire width of the div */
height: 75vw; /* 100% height + 50% overflow */
transform: translate(-40%, 0%); /* Adjust positioning to account for overflow */
z-index: -1; /* Place the overlay behind the content */
}
@media screen and (max-width: 768px) {
.underlay9::before {
width: 125vw; /* Fill the entire width of the div */
height: 125vw; /* 100% height + 50% overflow */
transform: translate(10%, -110%); /* Adjust positioning to account for overflow */
opacity: 0.5;
}
}
.overlay10::before {
/* Overlay using the SVG as background image */
content: "";
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat; /* Prevent tiling */
background-size: cover; /* Stretch image to fill container (adjusted below) */
position: absolute;
top: 0;
right: -10vw; /* Align to left edge */
width: 52vw; /* Fill the entire width of the div */
height: 70vw; /* 100% height + 50% overflow */
z-index: 1; /* Place the overlay behind the content */
}
@media screen and (max-width: 768px) {
.overlay10::before {
width: 95vw; /* Fill the entire width of the div */
height: 135vw; /* 100% height + 50% overflow */
transform: translate(10%, -10%); /* Adjust positioning to account for overflow */
opacity: 0.5;
}
}
.overlay11::before {
/* Overlay using the SVG as background image */
content: "";
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat; /* Prevent tiling */
background-size: cover; /* Stretch image to fill container (adjusted below) */
position: absolute;
top: -20vh;
left: 0; /* Align to left edge */
width: 41vw; /* Fill the entire width of the div */
height: 57vw; /* 100% height + 50% overflow */
z-index: -1; /* Place the overlay behind the content */
}
@media screen and (max-width: 768px) {
.overlay11::before {
width: 95vw; /* Fill the entire width of the div */
height: 135vw; /* 100% height + 50% overflow */
transform: translate(-10%, 20%); /* Adjust positioning to account for overflow */
opacity: 0.5;
}
}
.underlay-community-logos::after {
/* Overlay using the SVG as background image */
content: "";
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat; /* Prevent tiling */
background-size: cover; /* Stretch image to fill container (adjusted below) */
position: absolute;
top: -16vh;
right: 0; /* Align to left edge */
width: 54vw; /* Fill the entire width of the div */
height: 52vw; /* 100% height + 50% overflow */
z-index: 5; /* Place the overlay behind the content */
}
@media screen and (max-width: 768px) {
.underlay-community-logos::after {
width: 95vw; /* Fill the entire width of the div */
height: 135vw; /* 100% height + 50% overflow */
transform: translate(0%, 20%); /* Adjust positioning to account for overflow */
opacity: 0.5;
}
}/*# sourceMappingURL=styles-overlays.css.map */