.consent {
    background: #966dee;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.consent button {
    background-color: #fff;
    border: 1px solid #464fea6e;
    cursor: pointer;
    outline: none;
    padding: 6px 10px;
    appearance: none;
    border-radius: 4px;
    font-feature-settings: "palt";
    letter-spacing: 0.5px;
    transition: background-color .3s ease, color .3s ease;
}

.consent button:hover {
    background-color: #464fea6e;
    color: #fff;
}

.consent button:first-child {
    margin-right: 6px;
}

.consent button:last-child {
    margin-left: 6px;
}



@layer base, special;

@layer special {
  .grid-element--1 {
    /* border: 5px solid red; */
  }
  .grid-element--1 p {
    color: red;
  }
}

@layer base {
  .grid-element--1 {
    /* border: 5px solid green; */
  }
  .grid-element--1 p {
    color: green;
  }
}

:root {
    accent-color: red
}

progress {
    accent-color: green
}

input[type=radio] {
    accent-color: pink
}

.grid-content:has(span) {
    /* border: 10px solid pink */
}

.grid-container {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr auto;

    /* 指定したcolumnsに要素が収まるなら、rowsで指定した最後の50pxは適用先がない（書かなくて関係ない） */
    /* grid-template-rows: 100px 1fr 50px; */

    grid-template-rows: repeat(auto-fill, 2, minmax(100px 150px));

    grid-template-areas:
        "one two"
        "three two"
        "four four"
        "six five"
}

.grid-1 { grid-area: one;}
.grid-3 { grid-area: three;}
.grid-4 { grid-area: four;}
.grid-5 { grid-area: five;}
.grid-6 { grid-area: six;}
.grid-2 {
    grid-area: two;

    /* grid-column: 2/3;
    grid-row: 2/2; */
    
    /* grid-column-start: 2;
    grid-row-start: 2;
    grid-column-end: 3;
    grid-row-end: 3; */
}

.grid-1,.grid-2,.grid-3,.grid-4,.grid-5,.grid-6 {
    background: #f8e68a;
    /* border: 5px solid #f4d742; */
}