@import "colors.css";

.ItemBlock{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    border:2px solid var(--PrimaryColor);
    justify-items:flex-end;
}
.ItemBlock .ImageBlock{
    width:90%;
    margin:2px;
    position:relative;
}
.ItemBlock .ImageBlock .MainImage{
    aspect-ratio:1/1;
    margin:5px;
    width:100%;
}
.PriceBlock{
   display:flex;
   flex-direction:row;
   margin-left:4px;
}
.PriceBlock h3{
    color:red;
    font-weight:bolder;
}
.QrCodeBlock {
    border: 2px solid var(--PrimaryColor);
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 35%;
    aspect-ratio: 1/1;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 5px;
    padding:5px;
    background-color:white;
}
.QrCodeBlock h1{
    display:flex;
    width:100%;
    height:100%;
    background-color:white;
    color:red;
    justify-content:center;
    align-items:center;
    border-radius:5px;
}
.QrCodeBlock image{
    width:100%;
    height:100%;
    margin:0px;
}
.ItemOfferBlock{
    display:flex;
    background-color:red;
    color:white;
    align-items:center;
    justify-items:center;
}
.ItemOfferBlock h3{
    font-size:14px;
    font-weight:bold;
}
.ItemBlock .Footer{
    display:flex;
    flex-direction:column;
    width:100%;
}
.ItemBlock .Footer h1,h2{
    font-weight:bold;
    margin-left:4px;
}
.ItemBlock .Footer h1{
    font-size:14px;
}
.ItemBlock .Footer h2{
    font-size:12px;
}
.CodeBlock {
    background-color: yellow;
    border-top: 1px solid var(--PrimaryColor);
    border-bottom: 1px solid var(--PrimaryColor);
    display: flex;
    justify-content: center;
    justify-items: center;
}
.CodeBlock h1{
    font-weight:bold;
    font-size:16px;
    color:black;
}

@media (min-width: 768px){
    .ItemBlock .Footer h1{
        font-size:16px;
    }
}