#totalSolutionPackageSection{
    margin-top: 180px;
    margin-bottom: 180px;
	margin-left: 15%;
	margin-right: 15%;
    display:grid;
    grid-template-columns: 2fr 1fr;
	gap: 5%;
}


#totalSolutionPackageSection p{
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 13px;
    font-weight: 200;
    line-height: 26px;
    color: #212529;
    text-align: left;
    background-color: #fff;
    margin-bottom: 1rem;
}


#totalSolutionEquationDiv {
  display: grid;
  grid-template-columns: 5fr 1fr 5fr 1fr 5fr 1fr; 
  width: 100%;
}

#totalSolutionEquationDiv img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(58%) sepia(6%) saturate(134%) hue-rotate(187deg) brightness(93%) contrast(90%);
}

.totalSolutionLinkedImg {
	text-decoration: none;
	width: 100%;
	height: 100%;
}

.totalSolutionLinkedImg:hover{
	filter: invert(54%) sepia(47%) saturate(4974%) hue-rotate(8deg) brightness(99%) contrast(101%);
    cursor: pointer;    
}
#totalSolutionTextDiv{
	text-align: center;
}
#totalSolutionTextDiv p{
	text-align: left;
}


/*------------------------------------------------------------------------------------------------*\

| xxs breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 320px) {
    #totalSolutionPackageSection {
        grid-template-columns: 1fr; 
        grid-template-rows: auto auto; 
        gap: 0px;
    }

	#totalSolutionEquationDiv {
		display: grid;
		grid-template-columns: 5fr 1fr 5fr 1fr 5fr 0fr; 
		width: 100%;
		margin-bottom: 64px;
	}

	#totalSolutionTextDiv{
		text-align: center;
	}
}

/*------------------------------------------------------------------------------------------------*\

| xs breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 321px) and (max-width: 480px) {
    #totalSolutionPackageSection {
        grid-template-columns: 1fr; 
        grid-template-rows: auto auto; 
        gap: 0px;
    }

	#totalSolutionEquationDiv {
		display: grid;
		grid-template-columns: 5fr 1fr 5fr 1fr 5fr 0fr; 
		width: 100%;
		margin-bottom: 64px;
	}

	#totalSolutionTextDiv{
		text-align: center;
	}
}

/*------------------------------------------------------------------------------------------------*\

| sm breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 481px) and (max-width: 768px) {
    #totalSolutionPackageSection {
        grid-template-columns: 1fr; 
        grid-template-rows: auto auto; 
        gap: 0px;
    }

	#totalSolutionEquationDiv {
		display: grid;
		grid-template-columns: 5fr 1fr 5fr 1fr 5fr 0fr; 
		width: 100%;
		margin-bottom: 64px;
	}

	#totalSolutionTextDiv{
		text-align: center;
	}
}

/*------------------------------------------------------------------------------------------------*\

| md breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 769px) and (max-width: 1024px) {
	#totalSolutionPackageSection{
		margin-left: 10%;
		margin-right: 10%;
		display:grid;
		grid-template-columns: 3fr 2fr; 
	}

	#totalSolutionEquationDiv {
		display: grid;
		grid-template-columns: 5fr 1fr 5fr 1fr 5fr 1fr; 
		width: 100%;
	}
}

/*------------------------------------------------------------------------------------------------*\

| lg breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1025px) and (max-width: 1280px) {

}

/*------------------------------------------------------------------------------------------------*\

| xl breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1281px) and (max-width: 1440px) {

}

/*------------------------------------------------------------------------------------------------*\

| xxl breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1441px) and (max-width: 1920px) {

}

/*------------------------------------------------------------------------------------------------*\

| xxxl breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1921px) {

}