@font-face{font-family:Urbanist;src:url(https://fonts.googleapis.com/css2?display=swap&family=Noto+Sans+Thai&family=Roboto%3Awght%40300&family=Urbanist)}.blocks-background.exampleBlock{display:grid;width:100%;height:auto;grid-template-columns:repeat(2,1fr);max-width:1400px;margin:unset;grid-template-rows:auto auto auto minmax(50px,auto);grid-gap:20px}@media screen and (max-width:840px){.blocks-background.exampleBlock{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width:630px){.blocks-background.exampleBlock{grid-template-columns:repeat(1,1fr)}}.blocks-background.exampleBlock.blocks-background{display:grid;width:100%;height:auto;grid-template-columns:repeat(2,1fr);max-width:1400px;margin:unset}@media screen and (max-width:840px){.blocks-background.exampleBlock.blocks-background{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width:630px){.blocks-background.exampleBlock.blocks-background{grid-template-columns:repeat(1,1fr)}}.blocks-background.exampleBlock .explenationBlock{display:grid;grid-template-columns:2fr 3fr;grid-column:1/2;justify-self:center;grid-gap:20px;width:100%}.blocks-background.exampleBlock .explenationBlock .blockImage{background-position:50%;background-repeat:no-repeat;background-size:cover;height:100%;width:100%;min-height:180px;grid-column:1/2;border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px;-ms-border-radius:30px;-o-border-radius:30px}.blocks-background.exampleBlock .explenationBlock .explenationText{display:grid;grid-template-rows:-webkit-min-content -webkit-min-content auto;grid-template-rows:min-content min-content auto;text-align:start;color:var(--text-primary);gap:5px;padding:10px 5px}.blocks-background.exampleBlock .explenationBlock .explenationText .block-title{font-weight:700}.blocks-background.exampleBlock .explenationBlock .explenationText p{margin:unset}.blocks-background.exampleBlock .explenationBlock .explenationText .arrow-explenation{width:-webkit-min-content;width:-moz-min-content;width:min-content}.blocks-background.exampleBlock .explenationBlock .explenationText .arrow-explenation i{color:var(--data-color-primary)}.blocks-background.exampleBlock .explenationBlock .explenationText .arrow-hidden{display:none}.blocks-background.exampleBlock .explenationBlock .explenationText .explenation-content{height:-webkit-min-content;height:-moz-min-content;height:min-content}.blocks-background.exampleBlock .explenationBlock .explenationButton{font-weight:700;text-align:center;background:var(--data-color-white);color:var(--data-color-white);cursor:pointer;border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px;-ms-border-radius:30px;-o-border-radius:30px;border-width:2px;padding:5px 10px;font-size:var(--font-size-h3);width:-webkit-max-content;width:-moz-max-content;color:var(--data-color-primary);border:2px solid var(--data-color-primary);width:max-content;height:-webkit-max-content;height:-moz-max-content;height:max-content}.blocks-background.exampleBlock .explenationBlock .explenationButton:hover{background:var(--button-hover);color:var(--text-hover)}.blocks-background.exampleBlock .explenationBlock .explenationButton p{display:grid;grid-template-columns:auto auto;gap:10px}.blocks-background.exampleBlock .explenationBlock .explenationButton p .material-symbols-outlined{background-color:var(--data-color-white);color:var(--data-color-primary);border-radius:50%;font-size:20px;height:20px;width:20px;align-items:center;justify-content:center;display:flex;place-self:center}.blocks-background.exampleBlock .explenationBlock .explenationButton:hover p .material-symbols-outlined{color:var(--button-hover);background-color:var(--data-color-primary)}.blocks-background.exampleBlock .explenationBlock:nth-child(4n){grid-template-columns:1fr;grid-template-rows:1fr 50px;grid-column:2/3;grid-row:1/5}.blocks-background.exampleBlock .explenationBlock:nth-child(4n) .blockImage{grid-column:1/2;grid-row:1/2}.blocks-background.exampleBlock .explenationBlock:nth-child(4n) .explenationText{background-color:var(--data-color-white);grid-column:1/2;grid-row:1/3;align-self:flex-end;justify-self:flex-end;width:-webkit-min-content;width:-moz-min-content;width:min-content;min-width:80%;padding:20px;border-radius:30px 0 0 0;-webkit-border-radius:30px 0 0 0;-moz-border-radius:30px 0 0 0;-ms-border-radius:30px 0 0 0;-o-border-radius:30px 0 0 0}.blocks-background.exampleBlock .explenationBlock:nth-child(4n) .explenationText .arrow-explenation{display:none}.blocks-background.exampleBlock .explenationBlock:nth-child(4n) .explenationText .explenationButton{margin-top:10px}@media screen and (max-width:1000px){.blocks-background.exampleBlock .explenationBlock{grid-template-columns:100%}}@media screen and (max-width:630px){.blocks-background.exampleBlock .explenationBlock{grid-template-columns:100%}.blocks-background.exampleBlock .explenationBlock:nth-child(4n){grid-template-rows:unset;grid-column:1/2;grid-row:unset}.blocks-background.exampleBlock .explenationBlock:nth-child(4n) .blockImage{border-radius:unset}.blocks-background.exampleBlock .explenationBlock:nth-child(4n) .explenationText{border-radius:unset;grid-row:2/3;padding:unset;width:100%}}