:root {
  --img-sa-maingrid: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  --img-sa-maingrid-rgap: 1rem;
  --img-sa-maingrid-cgap: 1rem;
  --block-margin: 4rem;
  --primary-color: #0076c6;
  --img-ss-maingrid: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  --img-ss-maingrid-rgap: 1rem;
  --img-ss-maingrid-cgap: 1rem;
  --ss-block-margin: 4rem;
  --primary-color: #0076c6;
  --img-ss-twogrid: minmax(0, 1fr) minmax(0, 1fr);
  --img-ss-twogrid-cgap: 1rem;
  --img-ss-twogrid-rgap: 1rem;

  --img-ss-thregrid: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  --img-ss-threegrid-cgap: 1rem;
  --img-ss-threegrid-rgap: 1rem;

  --img-ss-two-squregrid: minmax(0, 1fr) minmax(0, 1fr);
  --img-ss-two-squregrid-cgap: 1rem;
  --img-ss-two-squregrid-rgap: 1rem;
  --blur: 10px;
  --fs-xsm: 0.6rem;
  --fs-sm: 1rem;
  --fs-md: 1.5rem;
  --fs-lg: 2rem;
  --fs-xlg: 3rem;
  --mt-temp: 100px;
}
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
html {
  font-size: 16px;
}

body {
  font-family: "Inter", sans-serif;
}

.com-sa-maingrid {
  display: grid;
  grid-template-columns: var(--img-sa-maingrid);
  grid-column-gap: var(--img-sa-maingrid-cgap);
  grid-row-gap: var(--img-sa-maingrid-rgap);
}
.block {
  margin-top: var(--block-margin);
  margin-bottom: var(--block-margin);
}
.mt-top {
  margin-top: 100px !important;
}
/* ss */
.com-ss-maingrid {
  display: grid;
  grid-template-columns: var(--img-ss-maingrid);
  grid-column-gap: var(--img-ss-maingrid-cgap);
  grid-row-gap: var(--img-ss-maingrid-rgap);
}
.com-ss-two-img-grid {
  display: grid;
  grid-template-columns: var(--img-ss-twogrid);
  grid-column-gap: var(--img-ss-twogrid-cgap);
  grid-row-gap: var(--img-ss-twogrid-rgap);
}
.com-ss-three-grid {
  display: grid;
  grid-template-columns: var(--img-ss-thregrid);
  grid-column-gap: var(--img-ss-threegrid-cgap);
  grid-row-gap: var(--img-ss-twogrid-rgap);
}
.com-ss-two-squre-grid {
  display: grid;
  grid-template-columns: var(--img-ss-two-squregrid);
  grid-column-gap: var(--img-ss-two-squregrid-cgap);
  grid-row-gap: var(--img-ss-two-squregrid-rgap);
}
.ss-block {
  margin-top: var(--ss-block-margin);
  margin-bottom: var(--ss-block-margin);
}

/* 53 grid */
.com-53grid-main {
  display: grid;
  grid-template-columns:
    minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)
    minmax(0, 1.5fr);
  grid-column-gap: 1rem;
}
.image-container-A1 {
  width: 100%;
  height: auto;
}

.image-img-A1 {
  width: 100%;
  height: auto;
}

@media (max-width: 1024px) {
  :root {
    --mt-temp: 70px;
    --block-margin: 2rem;
    --ss-block-margin: 2rem;
  }
}
@media (max-width: 768px) {
  :root {
    --mt-temp: 50px;
    --img-sa-maingrid: minmax(0, 1fr);
    --block-margin: 1rem;
    --img-sa-maingrid: minmax(0, 1fr);
    --img-ss-maingrid-cgap: 0.2rem;
    --img-ss-twogrid-cgap: 0.2rem;
    --img-ss-threegrid-cgap: 0.2rem;
    --img-ss-two-squregrid-cgap: 0.2rem;
    --ss-block-margin: 1rem;
  }
  .com-53grid-main {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)
      minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    grid-column-gap: 0.2rem;
    grid-row-gap: 0.2rem;
  }
  .com-53grid-box1 {
    /* display: none; */
    grid-column: 1/4;
    grid-row: 2/3;
  }

  .com-53grid-box2 {
    /* display: none; */
    grid-column: 1/3;
    grid-row: 1/2;
  }
  .com-53grid-box3 {
    /* display: none; */
    grid-column: 3/5;
    grid-row: 1/2;
  }
  .com-53grid-box4 {
    /* display: none; */
    grid-column: 5/8;
    grid-row: 1/2;
  }
  .com-53grid-box5 {
    /* display: none; */
    grid-column: 4/8;
    grid-row: 2/3;
  }
}
@media (max-width: 640px) {
  :root {
    --mt-temp: 50px;
  }
}
@media (max-width: 480px) {
  :root {
    --mt-temp: 50px;
  }
}