src/components/modal/modal-note/modal-note.module.css
.container {
padding: 125px 40px;
display: flex;
justify-content: center;
align-items: flex-start;
}
.btn-close {
height: 24px;
width: 24px;
position: absolute;
right: 40px;
top: 40px;
z-index: 1;
background-color: transparent;
transform: scale(1);
transition: transform 0.5s;
}
.btn-close:hover,
.btn-close:focus {
transform: scale(1.5);
}
.content {
padding: 30px 40px;
border-radius: 10px;
background: var(--modal-bg);
-webkit-box-shadow: var(--shadow);
-moz-box-shadow: var(--shadow);
box-shadow: var(--shadow);
position: relative;
display: grid;
grid-template-columns: 1fr 40%;
grid-template-rows: auto auto 1fr 60px;
column-gap: 40px;
row-gap: 20px;
}
.title {
color: var(--text);
font-size: 48px;
font-weight: 900;
max-width: calc(100% - 24px - 20px);
grid-column-start: 1;
grid-column-end: -1;
margin-bottom: 5px;
}
.date {
color: var(--hint-2);
font-size: 18px;
font-weight: 300;
}
.description {
color: var(--text);
font-size: 22px;
font-weight: 300;
line-height: 26px;
}
.actions {
display: flex;
gap: 40px;
}
.btn > svg {
width: 24px;
height: 24px;
}
.image-container {
position: relative;
grid-column-start: 2;
grid-row-start: 2;
grid-row-end: -1;
}
.mood-status {
position: absolute;
top: 40px;
right: 40px;
}
.image {
width: 100%;
height: 100%;
min-height: 180px;
border-radius: 10px;
overflow: hidden;
-webkit-box-shadow: var(--shadow);
-moz-box-shadow: var(--shadow);
box-shadow: var(--shadow);
}
@media (max-width: 1439px) {
.container {
padding: 80px;
}
.content {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto 1fr 60px;
column-gap: 0;
row-gap: 30px;
}
.title {
margin-bottom: -10px;
}
.description {
font-size: 20px;
}
.image-container {
grid-column-start: 1;
grid-row: 2 / 3;
}
}
@media (max-width: 1023px) {
.container {
padding: 20px;
}
.btn-close {
top: 20px;
right: 15px;
}
.btn-close svg {
fill: var(--background-white);
}
.content {
grid-template-rows: auto auto auto 1fr 40px;
padding: 20px;
row-gap: 20px;
}
.title {
margin-bottom: -10px;
}
.body {
display: flex;
flex-direction: column;
gap: 15px;
}
.title {
max-width: unset;
font-size: 18px;
font-weight: 700;
grid-row-start: 2;
margin: 0;
margin-bottom: -5px;
}
.date {
font-size: 12px;
margin-bottom: -5px;
}
.description {
font-size: 14px;
line-height: normal;
}
.actions {
gap: 20px;
}
.btn {
width: 50%;
}
.btn > span {
width: 1px;
height: 1px;
clip: rect(0 0 0 0);
overflow: hidden;
position: absolute;
}
.btn > svg {
width: 18px;
height: 18px;
}
.image-container {
grid-row-start: 1;
grid-row-end: 2;
margin: -20px -20px 0;
}
.mood-status {
top: unset;
right: 20px;
bottom: 20px;
}
}