@media(max-width: 425px) {
.grid-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
 }
}
@media(min-width: 768px) {
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
 }
}
@media(min-width: 1024px) {
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
 }
}
 @media (min-width: 1440px) {
	 main {
		 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Ccircle cx='300' cy='300' r='300' fill='%23f3f5f8'%3E%3C/circle%3E%3C/svg%3E");
		 background-size: 325px 325px;
		 background-position-y: 15%, 60%;
		 background-position-x: calc(100% + 20px), calc(18% + -153px);
		 background-repeat:
		 no-repeat;
		 margin-bottom: 0;
		 padding-bottom: 4rem;
		 padding-right:180;
	}
}
@media (min-width: 1200px) {
    h2.circle-bg {
        position: relative;
}
    h2.circle-bg::before {
        content: "";
        height: 20rem;
        width: 20rem;
        display: block;
        background-color: var(--gfColors-slate15) ;
        border-radius: 50%;
        position: absolute;
        top: -4rem;
        left: -12rem;
        z-index: -1;
}