* {
box-sizing: border-box;
font-family: "Montserrat",sans-serif;
}
html {
overflow-y: scroll;
}
.main-container {
display: flex;
flex-direction: column;
width: 1200px;
height: auto;
margin: auto;
}
.line {
margin-top: 1px;
width: 100%;
height: 20px;
background-color: #848484;
}
/*-------main-nav-section-------*/
main {
display: flex;
flex-direction: row;
width: 100%;
height: auto;
margin: auto;
padding: 0px;
}
.main-section {
width: calc(100% - 300px - 25px);
margin-left: 25px;
}
h1 {
padding: 20px;
font-size: 24px;
font-weight: bold;
color: var(--color-blue);
line-height: 1.33;
}
.sect-1 {
display: flex;
flex-wrap: wrap;
align-items: stretch;
width: 100%;
}
/*-------BOX-------*/
.column {
margin-bottom: 14px;
width: 33.33%;
padding: 3px;
}
.prod-box {
padding: 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
border: 1px solid white;
}
.prod-box:hover {
border: 1px solid var(--color-blue);
}
.prod-box-1 {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.prod-img {
display: block;
margin: 0 auto;
width: 100%;
height: auto;
}
.prod-img > a > img {
display: block;
margin: 0 auto;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
}
.prod-title {
margin-top: 6px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 74px;
line-height: 1.5;
background-color: #E7E7E7;
}
.prod-title a {
padding-left: 5px;
padding-right: 5px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
height: 100%;
font-size: 17px;
cursor: pointer;
text-decoration: none;
color: var(--color-graphite);
border: 1px solid lightgrey;
}
.prod-title a:hover {
color: var(--color-blue);
}
.prod-title a:active {
outline: 1px solid var(--color-graphite);
  }
@media screen and (max-width: 3840px) {
.main-container {
width: 1200px;
}
.column {
width: 33.33%;
}}
@media screen and (max-width: 1680px) {
.main-container {
width: 1200px;
}
.column {
width: 33.33%;
}}
@media screen and (max-width: 1270px) {
.main-container {
width: 90%;
}
.column {
width: 33.33%;
}}
@media screen and (max-width: 1100px) {
.main-container {
width: calc(100% - 10px);
}
.column {
width: 50%;
}}
@media screen and (max-width: 800px) {
.main-container {
width: 100%;
}
main {
flex-direction: column;
}
h1 {
margin-top: 0px;
padding: 10px 20px;
font-size: 22px;
text-align: center;
}
.main-section {
margin: 0;
width: 100%;
padding-left: 3px;
padding-right: 3px;
}
.column {
width: 50%;
}
.prod-box-1 {
padding: 0 0 4px 0;
}
.prod-title {
margin-top: 2px;
width: 100%;
}
}